vue双向数据绑定原理分析、vue2和vue3原理的不同点

受疫情影响，今年各行业不景气，各岗位的跳槽形势也不是很高。所以趁此机会好好蓄力，复习面试题吧。现在中高级前端面试时都会被面试官问道原理性的知识。有些人就是实践很好，但就是理论知识不行。不过要想拿高薪，理论和实践还是要双结合的。

Vue数据双向绑定原理

在这里是需要区分vue2和vue3的，它们底层是不同的。

（一）Vue2双向数据绑定原理

简单理解：

vue2数据双向绑定是由数据劫持结合发布-订阅的模式实现的，通过object.defineProperty()来劫持对象属性的getter和setter操作，在数据变动时发布消息给订阅者，触发响应的监听回调。

通过object.defineProperty()这个方法接收3个参数，一个是定义属性的对象，第二个是要定义或者修改属性名，第三个是将被定义或者修改的属性描述符。

object.defineProperty(obj, name,{
    get:function resultGetter() {
        
    },
    set:function resultSetter() {
        
    }
})

重要名词：

• observer：数据监听器，监听数据对象进行遍历，包括子属性对象的属性都加上getter和setter。
• compile：解析模板指令，将模板中的遍历替换成数据，然后初始化渲染页面视图，并将每个指令对应节点绑定更新函数，添加监听数据的订阅者，一旦数据又变化，收到通知，更新视图。
• watcher：订阅者是observer和compile之间的通信桥梁，在自身实例化时往消息订阅器dep里添加自己，自身必须有个updata()方法，待属性变动dep.notice()通知时，能调用自身的updata()方法，并触发compiler中绑定的回调。
• depend：消息订阅器，当有多个订阅者的时候，需要有一个统一维护者。depend用来收集订阅者，内部维护了一个数组。

详细分析：

我们已经知道实现双向数据绑定，首先要对数据进行劫持监听，所以我们需要设置一个监听器observer，用来监听所有属性。

每个属性都会有一个订阅者watcher，如果一旦属性发生变化，就需要告诉订阅者watcher看是否需要更新。

因为订阅者是有很多的，所有需要一个消息订阅器depend来专门收集这些订阅者，然后在监听器和订阅者之间进行统一管理。

接着还需要一个指令解析器compile,对每个节点元素进行扫描和解析，将相关指令对应初始化成一个订阅者，并替换模板数据或者绑定响应的函数，从而更新视图。

（一）Vue3双向数据绑定原理

面试中面试官也会问另外一个问题：Vue响应式原理中object.defineProperty缺陷？为什么在Vue3.0采用了proxy，抛弃了object.defineProperty? 它们的回答是一样的。

因为vue2.0 object.defineProperty只能劫持对象属性，无法监控数组下标的变化，导致通过数据下标添加的元素不能实时响应的弊端。为了解决这个问题，经vue内部处理后，可以使用push()、pop() 、shift()、unshift()、splice()、sort()、reverse()进行hack处理,所以其他数组属性也是监测不到，具有一定的局限性。

因为object.defineProperty只能劫持对象属性，从而需要对每个对象的每个属性进行遍历。vue2.0里是通过递归+遍历data对象来实现对数据的监控的，如果属性值是对象的话，还需要深度遍历。

而Vue3.0中的proxy不仅可以代理对象，还可以代理数组，也可以代理动态添加的属性，有13种劫持操作：

• get 获取某个key值 （接收2个参数，目标值和目标值key值）
• set 设置某个key值 （目标值、目标的key值、要改变的值、改变前的原始值）
• apply 使用in 操作符判断某个key是否存在
• deleteProperty 删除一个property
• defineProperty 定义一个新的property

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

最新评论