84669 人学习
152542 人学习
20005 人学习
5487 人学习
7821 人学习
359900 人学习
3350 人学习
180660 人学习
48569 人学习
18603 人学习
40936 人学习
1549 人学习
1183 人学习
32909 人学习
官网文档中提到过,Vue 的v-model指令实现了数据的双向绑定。
v-model
https://vuejs.org/v2/guide/fo...
但是实际开发中,组件的数据流是单向的,子组件修改父组件 props 是不被推荐的做法。
所以问题是,Vue 的依赖追踪是【在原理上支持双向绑定,但只是为了开发上的便利而建议采用单向数据流】,还是【原理上不支持双向绑定,v-model只是通过监听 DOM 事件实现的语法糖】呢?
光阴似箭催人老,日月如移越少年。
Vue 的依赖追踪是【原理上不支持双向绑定,v-model 只是通过监听 DOM 事件实现的语法糖】
vue的依赖追踪是通过 Object.defineProperty 把data对象的属性全部转为 getter/setter来实现的;当改变数据的某个属性值时,会触发set函数,获取该属性值的时候会触发get函数,通过这个特性来实现改变数据时改变视图;也就是说只有当数据改变时才会触发视图的改变,反过来在操作视图时,只能通过DOM事件来改变数据,再由此来改变视图,以此来实现双向绑定
大致过程如下
//data var obj = { 'message':'hello' } //vm var val = obj.message Object.defineProperty(obj,'message',{ get(){ return val }, set(value){ val = value updataView() } }) function updataView(){ box.innerHTML = obj.message //触发get } // init updataView() textIpt.oninput = function(){ obj.message = this.value //触发set }
双向绑定是在同一个组件内,将数据和视图绑定起来,和父子组件之间的通信并无什么关联;组件之间的通信采用单向数据流是为了组件间更好的解耦,在开发中可能有多个子组件依赖于父组件的某个数据,假如子组件可以修改父组件数据的话,一个子组件变化会引发所有依赖这个数据的子组件发生变化,所以vue不推荐子组件修改父组件的数据,直接修改props会抛出警告
Vue 的依赖追踪是【原理上不支持双向绑定,v-model 只是通过监听 DOM 事件实现的语法糖】
vue的依赖追踪是通过 Object.defineProperty 把data对象的属性全部转为 getter/setter来实现的;当改变数据的某个属性值时,会触发set函数,获取该属性值的时候会触发get函数,通过这个特性来实现改变数据时改变视图;也就是说只有当数据改变时才会触发视图的改变,反过来在操作视图时,只能通过DOM事件来改变数据,再由此来改变视图,以此来实现双向绑定
大致过程如下
双向绑定是在同一个组件内,将数据和视图绑定起来,和父子组件之间的通信并无什么关联;
组件之间的通信采用单向数据流是为了组件间更好的解耦,在开发中可能有多个子组件依赖于父组件的某个数据,假如子组件可以修改父组件数据的话,一个子组件变化会引发所有依赖这个数据的子组件发生变化,所以vue不推荐子组件修改父组件的数据,直接修改props会抛出警告