vue双向数据绑定原理
vue数据双向绑定是通过数据劫持结合发布者-订阅模式的方式来实现的,通过Object.defineProperty()来来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,出发相应的监听回调来渲染视图。
var vm = new Vue({
data: {
obj: {
a: 1
}
},
created: function () {
console.log(this.obj);
}
});
具体步骤
第一步:
需要observer的数据对象进行递归遍历,包括子属性对象的属性,都加上setter和getter这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化。
第二部:
compile解析模板指令,将模板中的变量替换成数据,然后初始化页面渲染视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图。
第三步:
Watcher订阅者是Observer和Compile之间通信的桥梁,主要做的事情是:
- 在自身实例化时往属性订阅器(dep)里面添加自己
- 自身必须有一个update()方法
- 待属性变动dep.notice()通知时,能调用自身的updata()方法,并触发Compile中绑定的回调,则功成身退。
第四步:
MVVM作为数据绑定的入口,整合Observer,Compile和Watcher三者,通过Observer来监听自己的model数据变化,通过Compile来解析编译模板指令,最终利用Warcher搭起Observer和Complie之间通信桥梁,达到数据变化>视图更新;视图个交互变化(input)>数据model变更的双向数据绑定效果。
名词解释
1.什么是setter,getter
- **数据属性:**就是我们经常使用的属性
- **访问器属性:**也称存取器属性(存取器属性就是一组获取和设置值的函数)
我们可以看到属性a有两个相对应的get和set方法,为什么会多出两个方法呢?因为是通过Object.defineProperty()来实现数据劫持的。
Object.defineProperty()
语法
Object.defineProperty(obj,prop,descriptor)
参数
obj:要定义属性的对象
prop:要定义或修改属性的名称或Symbol
descriptor:要定义或修改属性的描述符
返回值
被传递给函数的对象。
在ES6中,由于Symbol类型的特殊性,用Symbol类型的值来做对象的key与常规的定义或修改不同,而Object.defineProperty()是定义可以为Symbol的属性的方法之一。