Vue双向数据绑定的原理源码解析

迷南。 2021-10-15 19:03 245阅读 0赞

### Vue追踪数据变化 ###

把一个普通的js对象传入Vue实例作为data选项，Vue将遍历该对象的所有属性，并使用`Object.defineProperty`转为`getter/setter`

每个组件实例都对应一个`watcher`实例，会在组件渲染的过程中把涉及到的数据属性记录为依赖。之后当依赖项的`setter`触发时，就会通知watcher，进而重新渲染相关的组件。

### 注意事项 ###

属性必须在data对象上存在才能让Vue将其转换为响应式的

对于已经创建的实例，Vue不允许动态添加根级别的响应式属性，可以用Vue.set()来添加

### vue的双向数据绑定通过数据劫持+发布订阅实现的 ###

1.  数据劫持的实现  
    vuejs里定义了一个`observe(value, asRootData)`方法， 该方法会检测传入的`value`是否已经被劫持过，如果是直接返回，如果不是，会用value实例化一个`Observer`实例，Observer方法中，通过`Object.defineProperty`对对象属性转为`getter/setter`，从而在数据发生变化时进行一系列操作。

observe方法在以下阶段有执行过：

*  initMixin() -> initState() -> initData()中执行，对vue实例的data属性进行处理
 *  initMixin() -> initState() -> initProps()-> validateProp()中执行， 对props里的属性进行处理

Observer实例

以上是Observer的主要源码，对传入的对象进行处理，如果已有\_\_ob\_\_属性，说明已经拦截处理过，直接返回\_\_ob\_\_属性的值即可。否则，针对传入的对象时数组还是对象，分别处理。最终都是要经过defineReactive$$1()方法来重写对象属性的get和set方法。

Watcher

Watcher 又是在什么地方实例化的呢

1.  stateMinxin -> vue.protorype.$watch方法中
2.  initMixin -> initData -> initComputed中
3.  initMixin -> vue.prototype.$mount -> mountComponent中

前两者主要是对vue实例中配置的watch和computed处理，同步数据的变化，最后一个是将视图和数据的绑定。

在Vuejs中，全局执行的方法主要有 `initMixin(Vue)， stateMixin(Vue)， eventsMixin(Vue)， lifecycleMixin(Vue)， renderMixin(Vue)， initGlobalAPI(Vue)`根据前缀基本可以理解分别是处理的哪些部分。

在`initMixin(Vue)`中，主要是初始化的工作， 例如初始化，`initProxy, initLifecycle, initEvents, initRender, initInjection, initState, initProvide`等，最后还执行了`vm.$mount方法`，进行视图的挂载

其中initRender方法中，通过`defineReactive$$1`对vue实例的`$attrs`和`$listeners`属性进行了拦截处理

`vm.$mount`方法中通过mountComponent(this, el, hydrating)指定了挂载和视图更新方法

vm.\_update大概介绍，该部分主要是对视图进行更新，通过虚拟DOM

`Vue.prototype._update`方法是在，initLifecycle中定义的，执行中调用了`vm.__patch__`方法；  
`vm.__patch__`方法中调用了`patch`，patch是一个全局方法，被赋值为`createPatchFunction({ nodeOps: nodeOps, modules: modules })`的返回值， 该方法就是 Virtual DOM的实现方法

综上：  
vue初始化阶段，通过new Observer()实例，调用defineReactive$$1方法对对象的属性进行拦截，并重写get和set方法，set方法中如果值发生了改变，会执行订阅者列表中watcher的update方法，进行更新。  
挂载dom时，会把生成的DOM树对象new Watcher， 添加到订阅者列表，当视图发生变化时，执行传入\_update中的\_render方法更新视图