千语前端

了解Vue的双向数据绑定原理

10/21/2021 数据绑定

# 了解VUE的双向数据绑定原理

Vue框架是双向数据绑定的，其中Vue 2.0使用了 Object.defineProperty()；在Vue 3.0中则是使用了ES6 的 Proxy特性。

  1. # 大体流程

Vue框架是双向数据绑定的，其中Vue 2.0使用了 Object.defineProperty()实现数据劫持；在Vue 3.0中则是使用了ES6 的 Proxy特性来劫持数据。

然后再结合发布者-订阅者模式的方式，在数据变动时发布消息给订阅者，触发响应的监听回调；

要理解Vue的双向绑定原理要首先了解Vue的单向数据流。

  1. # Vue的单向数据流

    1. 将Data中的数据通过调用Observe类变成可观察的响应式数据，为其添加getter/setter属性方法；
    1. 依赖收集，Watcher是响应式数据的观察者，而依赖就是Watcher类的实例；而Dep类的实例是存放依赖的对应响应数据的subs属性，比如组件A依赖数据b，那么组件A的Watcher就会存放在数据b的依赖数组subs里。
    1. 当数据发生变化时，根据响应式数据的set方法，首先会修改该属性的值，并出发dep.notify进行更新派发给对应的watcher实例的update方法；
    1. watcher更新将触发Compile解析器来解析对应的DOM节点；具体是根据DocumentFragment（DOM碎片节点收容器）来处理DOM节点的变化，进行DOM树的重绘，然后根据diff算法，将新旧的两棵DOM树进行比较；将比较完不一样的节点再更新到真正的DOM节点上去；

  1. # 数据的双向绑定

上一节的Vue的单向数据流实现了model -> view 的过程，那么view -> model是如何实现的呢？其实就是给input事件绑定oninput事件，来触发数据的setter方法，实现视图触发改变数据；