Vue的响应式原理和双向数据绑定

Vue的核心特性之一，数据驱动视图，我们修改数据视图随之响应更新

Vue2.x是借助Object.defineProperty()实现的，而Vue3.x是借助Proxy实现的，下面我们先来看一下2.x的实现。

响应式

Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    //拦截get，当我们访问data.key时会被这个方法拦截到
    get: function getter () {
        //我们在这里收集依赖
        return obj[key];
    },
    //拦截set，当我们为data.key赋值时会被这个方法拦截到
    set: function setter (newVal) {
        //当数据变更时，通知依赖项变更UI
    } 
})
复制代码

我们通过Object.defineProperty为对象obj添加属性，可以设置对象属性的getter和setter函数。之后我们每次通过点语法获取属性都会执行这里的getter函数，在这个函数中我们会把调用此属性的依赖收集到一个集合中 ；而在我们给属性赋值(修改属性)时，会触发这里定义的setter函数，在次函数中会去通知集合中的依赖更新，做到数据变更驱动视图变更。

3.x的与2.x的核心思想一致，只不过数据的劫持使用Proxy而不是Object.defineProperty，只不过Proxy相比Object.defineProperty在处理数组和新增属性的响应式处理上更加方便。

let nObj=new Proxy(obj,{
  //拦截get，当我们访问nObj.key时会被这个方法拦截到
  get: function (target, propKey, receiver) {
    console.log(`getting ${propKey}!`);
    return Reflect.get(target, propKey, receiver);
  },
  //拦截set，当我们为nObj.key赋值时会被这个方法拦截到
  set: function (target, propKey, value, receiver) {
    console.log(`setting ${propKey}!`);
    return Reflect.set(target, propKey, value, receiver);
  }
})
复制代码

Proxy的详细使用方法参考ES6教程。

总结

vue是响应式的，默认数据不是双向绑定的，但是提供了实现数据双向绑定的手段，我们可以通过v-model的语法糖来实现