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用来收集订阅者,内部维护了一个数组。
详细分析:
  1. 我们已经知道实现双向数据绑定,首先要对数据进行劫持监听,所以我们需要设置一个监听器observer,用来监听所有属性。
  2. 每个属性都会有一个订阅者watcher,如果一旦属性发生变化,就需要告诉订阅者watcher看是否需要更新。
  3. 因为订阅者是有很多的,所有需要一个消息订阅器depend来专门收集这些订阅者,然后在监听器和订阅者之间进行统一管理。
  4. 接着还需要一个指令解析器compile,对每个节点元素进行扫描和解析,将相关指令对应初始化成一个订阅者,并替换模板数据或者绑定响应的函数,从而更新视图。

(一)Vue3双向数据绑定原理

Vue3.0采用了proxy,解决了vue2.0 object.defineProperty只能劫持对象属性,无法监控数组下标的变化的弊端。
Vue3.0中的proxy不仅可以代理对象,还可以代理数组,也可以代理动态添加的属性,有13种劫持操作。

©️2020 CSDN 皮肤主题: 1024 设计师: 上身试试 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值