核心回答:
vue是采用数据劫持 结合 发布-订阅模式来实现响应式的。
vue2.x是通过ES5提供的Object.defineProperty()方法来劫持(监视) 对象中各个属性的getter和setter,当获取值时触发getter方法,设置值时触发setter方法,当数据变动时,发布消息给订阅者,触发相应的监听回调。
具体步骤:
-
将需要被响应式的对象进行递归遍历,包括子属性对象的属性,都添加上getter和setter方法,给这个对象的任意一个属性赋值,就会触发setter,就能监听到数据变化了。这个过程叫observer
-
compile解析模板指令,将模板中的变量替换成被监听的数据,初始化渲染页面时,将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,更新函数就会触发,然后更新视图
-
Watcher订阅者是Observer和compile之间通信桥梁
- 在自身实例化时在属性的dep中添加自己
- 自身有一个update方法
- 属性变化时触发dep.notice()方法时,调用自身的update方法,并触发compile中绑定的回调
-
而vue将observer、compile和watcher三者整合,通过observer来监听自己的model数据变化,通过compile来编译模板指令,最终利用watcher搭起的observer和compile之间的通信桥梁
达到数据变化—试图更新;
视图交互变化(input)–>数据model变更的双向绑定效果
版本比较:
vue3.0之前是采用的Object.definePropetry,
3.0版本非基本数据类型的采用的是 reactive 其背后是用的是 Proxy,基本数据类型可以采用Proxy,也可以使用ref, 其背后也是使用的Object.definePropetry
-
基于数据劫持/依赖收集 的双向绑定的优点
- 不需要显示的调用,Vue利用数据劫持+发布订阅,可以直接通知变化并且驱动视图
- 直接得到精确的变化数据,劫持了属性setter,当属性值改变,我们可以精确的获取变化的内容newValue,不需要额外的diff操作
-
Object.defineProperty的缺点
-
不能监听数组:因为数组没有getter和setter,而且数组长度不确定,如果太长性能负担太大
-
只能监听属性,而不是整个对象,需要遍历循环属性
-
只能监听属性变化,不能监听属性的删减
-
-
proxy的好处
- 可以监听数组
- 监听整个对象不是属性
- 13种拦截方法,强大很多
- 返回新对象而不是直接修改原对象,更符合immutable;
-
proxy的缺点
- 兼容性不好,无法被polyfill磨平