Vue 双向绑定原理精简答案

252 阅读1分钟

Vue2中双向绑定借用“一对多”观察者模式来实现。监听“一”,“一”改变时 让与“一”相关的“多”也改变。

当vue实例初始化时候 执行_init,  遍历data进行监听。 

核心是通过Object.defineProperty 的get读和set改方法,源码是在监听的属性被读的时候执行dep类的depend方法,dep类中有subs[ ]数组装的是被监听的订阅者,也就是一对多的多,set改的时候调用dep类的notify方法,遍历subs里的订阅者执行update( )去改变多的值。

数组是通过重写pop push shift unshift slice sort reverse 这七个方法进行更新监测

基本类型监听, 数组遍历+监听, 对象遍历+监听

Vue2会导致一个问题  就是下角标更改数组、或者增加删除对象属性的时候监测不到 可以通过this.$set( )去避免这个问题。Vue3用proxy代理实现双向绑定  解决了这个问题。