vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue双向数据绑定原理

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

作者:HELLO_小仙女~

这篇文章主要介绍了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,用来监听所有属性。

每个属性都会有一个订阅者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种劫持操作:

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

您可能感兴趣的文章:
阅读全文