[Vue] 对 Vue 数据响应式的理解

何为数据响应式

在改变数据的时候，视图会跟着更新

这就意味着我们只需要修改数据，视图就会自动更新，不需要我们再花费精力管理这一块。

参考VUE文档里的 深入响应式原理

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。

Vue 数据响应式原理

Vue 采用的是数据劫持结合发布和-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter,getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

我们可以用一段伪代码模仿vue的数据劫持过程：

const data={
    num: 0,
    len:0
}
function observer(target){
    if (typeof target !=="object" || target ===null) {
       return
    }
    for (let key in target) {
        proxy(target,key,target[key])
    }
 }
 function proxy(target,key,value) {
     let obj = {};
     Object.defineProperty(obj,key,{
         get(){
          return value;
          },
          set(newValue){
             if (newValue!==value) {
                value=newValue();
                console.log("更新视图")
            }
         }
      })
      return obj;
    }

 observer(data)

proxy 函数的原理是通过 Object.defineProperty 函数在实例对象 vm 上定义与 data 数据字段同名的访问器属性，并且这些属性代理的值是 obj 上对应属性的值。

响应式和双向数据绑定

数据响应式和双向数据绑定两者之间有一定的差异。

• 数据响应式原理：

  通过数据的改变去驱动 DOM 视图的变化。

• 双向数据绑定：

  双向绑定除了数据驱动 DOM 之外， DOM 的变化反过来影响数据，是一个双向的关系。