首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

45·灵魂前端工程师养成-Vue进阶属性computed和watch

你是不是要1万遍?万一哪个地方漏或者少加一个空格那就是代码中的bug,老板娘就是要让你爽......return users.filter(u => u.gender === hash[gender]) }else{ throw new Error("gender 的是意外的...$mount('#app') 同样点击obj.a + hi,就会出现obj变了,就不需要再监听obj.a了  ---- watch的完整用法 语法1 不要使用箭头函数来定义watch watch...//其中'xxx'可以改为一个返回字符串的函数 ---- computed和watch的区别 1.computed是计算一个的 2.computed在调用的时候不需要加括号,可以当属性去用 3.computed...的依赖会自动缓存 4.watch是监听一个的 5.watch有两个选项,immediate:是否在第一次渲染的时候执行该函数,deep:是否监听对象里面的属性变化 6.watch在方法中会传入newVal

39010

检测(代表:angular1)前面说

而单向数据流就不同了,我们只有ui行为改变,data就改变并马上反馈到v层,而我们自己在控制台改变data这个,v层居然不变(model是已经变了并没有反应),只能等到下一次ui行为改变,带上这个data...状态 a.innerHTML = str//重新渲染 } 复制代码 但是如果在控制台获取input这个dom,在设置value,不会马上反映,只能等下一次带着这个结果一起作用。...,m层也能让v层变了,只是不能互相关联起来,不能做到改变一个层另一个层也能改变。...网上有很多人有vue双绑demo,但是他们有一部分是仅仅单向绑定的,不妨手动去控制台一下那个核心绑定的数据,V层的显示内容能马上变化的就是双绑、不能马上有变化的只是单向数据 4....这个默认是10。因为digest经常被执行,而且每个digest运行了所有的$watch,再加上用户一般不会创建10个以上链状的监听器。

1.6K40

从单向到双向数据绑定

而单向数据流就不同了,我们只有ui行为改变,data就改变并马上反馈到v层,而我们自己在控制台改变data这个,v层居然不变(model是已经变了并没有反应),只能等到下一次ui行为改变,带上这个data...状态 a.innerHTML = str//重新渲染 } 但是如果在控制台获取input这个dom,在设置value,不会马上反映,只能等下一次带着这个结果一起作用。...网上有很多人有vue双绑demo,但是他们有一部分是仅仅单向绑定的,不妨手动去控制台一下那个核心绑定的数据,V层的显示内容能马上变化的就是双绑、不能马上有变化的只是单向数据 4....$digest();//第一次digest 当然,还会有一个问题,当有两个watch循环监听(watch1监听watch2,watch2监听watch1),一个digest循环执行很多次,而且是多余操作...这个默认是10。因为digest经常被执行,而且每个digest运行了所有的$watch,再加上用户一般不会创建10个以上链状的监听器。

3.6K20

44·灵魂前端工程师养成-前端框架Vue数据响应式

---- Vue对data做了什么 ---- 小实验 data变了 codesandbox示例代码:TP import Vue from "vue/dist/vue.js"; Vue.config.productionTip...// 需求二,姓名不要括号也能得出 let obj2 = { 姓: "邓", 名: "紫琪", get 姓名(){ return this.姓 + this.名 }, age...我们不可能去修改定义的部分,如果这个功能是别的开发写好的代码给你的,你不可能别人的代码吧?...// 需求二,姓名不要括号也能得出 let obj2 = { 姓: "邓", 名: "紫琪", get 姓名() { return this.姓 + this.名; },...答案是:不会 因为,Vue再牛逼,它也不可能监听一个不存在的字符串 ,obj.b 一开始就不存在,如何监听?不能把所有字符串都监听一遍吧?

82510

JS原生数据绑定原理

用过vue的人都知道,vue有一个特别好用的数据绑定,只要绑定了,你只要改变了这个数据,页面也会跟着渲染。其实原生的JS也是可以做到的,vue其实就是用了原生的原理。...configurable:true或false,属性是否能删除和再次设置,默认false; enumerable:true或false,属性是否能枚举,默认false; value:任意类型的,默认undefined...; console.log(obj.hello) }; obj.hello = 999; 当我们监听input的键盘事件的时候,只要input里面的变了,...这时候估计很多人会觉得都是监听,那还不如直接写在input的监听事件里面,其实不是的,只要你调用了obj.hello,页面的就会变化。...就像obj.hello = 999;那么页面的就会是999;感兴趣的可以复制代码的方法,一个一个方法调用,就很容易明白原生JS的双向绑定。

1.8K30

reactive是如何实现深层响应的?

// reactivity.js function createGetter(isReadonly = false, shallow = false) { return function get...监听任意属性的的变化。 最简单的方式就是用 watch 的深度监听功能。 watch (() => reactive1, () => { // 属性变了。...}, {deep:true}) 这样任意一层的属性的变化,都可以获知,只是有个小问题,只知道有属性变了,但是不知道具体是哪个属性变了。两个参数也都是新,没有旧值了。...那么如果一定要知道是哪个属性变了呢? 用 proxy 套个娃 既然 Proxy 里面可以进行各种拦截,那么为啥不顺便返回来改了哪个属性呢?..., path) => { console.log(`ret3 - 定义端监听:【${kind}】 ${key}-`, value, path) }) const retChage = () =>

93820

vue数据双向绑定原理-observer

实现数据绑定的做法有大致如下几种: 发布者-订阅者模式(backbone.js) 脏检查(angular.js) 数据劫持(vue.js) vue.js 则是采用数据劫持结合发布者-订阅者模式的方式,...=value){a = value; Invalidate(); } } } # 当a的发生变化, 就重绘视图 再来看看 Object.defineProperty(obj, prop, descriptor...数据描述符同时具有以下可选键值: value 该属性对应的。可以是任何有效的 JavaScript (数值,对象,函数等)。默认为 undefined 。...) { console.log("监听变化了: ", val, "==>", value); val = value; }, }); } var A = {...(data, key, { set: function(value) { dep.notify() //发出通知, 我被改变了 } }); } 至此, 简陋的 监听器就实现完成了

71220

从后端到前端之Vue(五)小试路由

然后呢,页面当然是不会有啥变化的,因为vue是数据驱动,我们的数据改变了吗?并没有,我们只是改变了一下url。...这个vue似乎没有对rul做监听,或者是我还不知道怎么让vue去监听url的变化,总之我们先自己改变数据,然后再去研究vue有没有办法去监听url。   ...最后加一个简单的导航,执行上面两行js代码。...只需要注意一下vue.js的引用地址确保能够正确加载js文件即可。   那么如果地址栏里输入 http://127.0.0.1:8000/aboutss 呢?当然是vue设计的404模块了。   ...不过还有一个问题,那个 const About 要怎么?这种简单的模板没办法做复杂应用的呀。也许只有在工程化的项目里,路由才能发挥最大的作用吧。

86720

JS实现简单的Vue

false, // 不能再define     get () {         return age     },     set (newVal) {         console.log('我改变了...',age +' -> '+newVal);         age = newVal     } }) > obj.age > 24 > obj.age = 25; > 我改变了 24 -> 25.../button>     {{form}} js调用  new Vue({         el: '#wrap',         data:{             form: '这是...(){                 console.log(this.form)                 this.form = '被我改变了,气不气?'             ...} }  之前发布订阅之后走了这里面的操作,意思就是把当前元素如:node.innerHTML = '这是data里面的'、node.value = '这个是表单的数据' 那么我们为什么不直接去更新呢

2.5K20
领券