vue数据双向绑定原理

什么是数据响应式？

数据响应式即数据双向绑定，就是把Model绑定到view，当我们通过js修改Model，View会自动更新；若我们更新了View，Model的数据也会自动更新，这就是双向绑定。

数据响应式原理

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的，

那么vue是如果进行数据劫持的？？？

1）vue2.0版本是利用了Object.defineProperty()这个方法重新定义对象获取属性值的get和设置属性值set的操作来实现的。

2）vue3.0版本采用了Es6的Proxy对象来实现。

我们先分别了解下defineProperty方法、Proxy对象。

什么是defineProperty？

defineProperty简言之，是定义对象的属性。它可以来控制一个对象属性的一些特有操作，比如读写权、是否可以枚举等。

它其实并不是核心的为一个对象做数据绑定，而是给对象做属性标签。定义对象的属性。只不过是属性的get和set实现了响应式。

属性名	默认值
value	undefined
get	undefined
set	undefined
writable	false
enumerable	false
configurable	false

接下来，我们先研究下它对应的两个描述属性get和set。

在平常，我们很容易就可以打印出一个对象的属性数据：

var person = {
  name: '小白'
};
console.log(person.name);  // 小白

如果想要在执行console.log(person.name)的同时，直接给书名加个书名号，那要怎么处理呢？或者说要通过什么监听对象 person 的属性值。

这时候Object.defineProperty( )就派上用场了，代码如下：

var person = {
  name: '小白'
}
var value = person.name
Object.defineProperty(person, 'name', {
  set: function (newValue) {
    value = newValue
    return '名字是' +  value;
  },
  get: function () {
    return '***' + value + '***'
  }
})

结果展示：

我们通过Object.defineProperty( )设置了对象person的name属性，对其get和set进行重写操作。

顾名思义，get就是在读取name属性这个值触发的函数，set就是在设置name属性这个值触发的函数。

实现一个简单完整版的mvvm双向绑定代码。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <title>vuetest</title>
  </head>
  <body>
    <div id="app">
      <input v-model="text" id="test"></input>
      <div id="show"></div>
    </div>
    <!-- built files will be auto injected -->
  </body>

  <script>
var obj = {
    a:1,
    b:2
};
var _value = obj.a
Object.defineProperty(obj,'a',{
    get:function(){
        console.log("get方法")
        return _value
    },
    set:function(newValue){
        console.log("set方法")
        _value = newValue
        document.getElementById('test').value   =_value
        document.getElementById('show').innerHTML  =_value
        return _value
    }
});
document.getElementById('test').addEventListener('input',function(e){
    obj.a = e.target.value;
})
</script>
</html>

Object.defineProperty的缺点：

无法监控到数组下标的变化，导致直接通过数组的下标给数组设置值，不能实时响应。

https://www.cnblogs.com/YikaJ/p/4278255.html

所以vue才设置了7个变异数组（push、pop、shift、unshift、splice、sort、reverse）的 hack 方法来解决问题。

只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历。如果能直接劫持一个对象，就不需要递归 + 遍历了

监听数组的改变

1）先拷贝一份数组原型链

2）定义一个方法总类

3）遍历数组，给数组原型链重新写方法，然后触发更新 dep.notify

proxy代理(详情点击 )

Proxy对象用于定义基本操作的自定义行为，和defineProperty功能类似，只不过用法有些不同

上述例子，用Proxy来替换defineProperty进行数据劫持。

var proxyObj = new Proxy(obj, {
  get:function(target, key, receiver){ //我们在这里拦截到了数据
        console.log("get方法",target,key,receiver)
        return true
    },
    set:function(target,key,value, receiver){  //改变数据的值，拦截下来额
        console.log("set方法",target,key,value, receiver)
        target[key]= value
        document.getElementById('test').value= value
        document.getElementById('show').innerHTML=value
        return true
    }
})

document.getElementById('test').addEventListener('input',function(e){
  proxyObj.a = e.target.value;
})

为什么vue3中改用proxy

1）defineProperty只能监听某个属性，不能对全对象监听，所以可以省去for in 提升效率

2）可以监听数组，不用再去单独对数组做操作

3）Proxy只是代理了原对象，不会污染原对象

那么，在vue中从一个数据到发生改变的过程是什么？

发布者-订阅者模式

‘

、

Observer是个监听器，用来监听vue中的data中定义的属性。

通过Obeject.defineProperty()来监听数据的变动，通过递归方法遍历所有属性值。如果属性发上变化了，会通知给对应的dep。

Dep 在监听器Observer和订阅者Watcher之间进行统一管理的。

主要的作用就是收集观察者Watcher和通知观察者目标更新。每个属性拥有自己的消息订阅器dep，Dep实例里面存放所有订阅了该属性的观察者对象，

当数据发生改变时，会遍历订阅者列表（dep.subs），通过dep.notify()通知Watcher。

depend 实例方法用来收集依赖，notify 实例方法用来触发依赖的执行。经过了 depend => watcher.addDep => addSub （watcher 表示 Watcher 的一个实例）之后，subs 中收集的依赖实际上都是 Watcher 实例，再经过 notify => watcher.update 之后就可以触发实例化 Watcher 时的渲染函数和回调函数（如果有）的执行了。

Watcher类主要用来收集依赖和触发更新。主要作用是为观察属性提供回调函数以及收集依赖（如计算属性computed，vue会把该属性所依赖数据的dep添加到自身的deps中），

Compile是指令解析器，解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数

被监听的数据进行取值操作时（getter），如果存在Dep.target（某一个观察者），则说明这个观察者是依赖该数据的（如计算属性中，计算某一属性会用到其他已经被监听的数据，就说该属性依赖于其他属性，会对其他属性进行取值），就会把这个观察者添加到该数据的订阅器subs里面，留待后面数据变更时通知（会先通过观察者id判断订阅器中是否已经存在该观察者），同时该观察者也会把该数据的订阅器dep添加到自身deps中，方便其他地方使用。

被监听的数据进行赋值操作时（setter）时，就会触发dep.notify()，循环该数据订阅器中的观察者，进行更新操作。

为什么要进行依赖收集？

new Vue({

data(){

return {

name:'zane',

sex:'男'

}

})

假设页面只使用到了name，并没有使用sex，根据Object.defineProperty的转换，如果我们设置了this.sex='女'，那么Vue也会去执行一遍虚拟DOM的比较，

这样就无形的浪费了一些性能，因此才需要做依赖收集，页面用到了就收集，没有用到就不收集。

首先根据上图实现整体的一个架构，用到订阅发布者的设计模式。

然后实现MVVM中的由M到V，把模型里面的数据绑定到视图。

最后实现V-M，当文本框输入文本，触发更改模型中的数据，及更新相对应的视图。

我们可以先来看一下通过控制台输出一个定义在vue初始化数据上的对象是个什么东西。

  <div id="app">
      <input v-model="text" id="test"></input>
      <div id="show"></div>
   </div>

class Vue{
  constructor(options){
    console.log(options)
  }
}
const app = new Vue({
    el: '#app',
    data:{
      text: 'test'
    }
})

打印：

 var Observer = function Observer (value) {
    this.value = value;
    this.dep = new Dep();
    this.vmCount = 0;
    def(value, '__ob__', this);
    if (Array.isArray(value)) {
      if (hasProto) {
        protoAugment(value, arrayMethods);
      } else {
        copyAugment(value, arrayMethods, arrayKeys);
      }
      this.observeArray(value);
    } else {
      this.walk(value);
    }
  };

 /**
   * Walk through all properties and convert them into
   * getter/setters. This method should only be called when
   * value type is Object.
   * 即浏览所有属性并将其转换为get/set。仅当值类型为“对象”时才应调用此方法。
   */
  Observer.prototype.walk = function walk (obj) {
    var keys = Object.keys(obj);
    for (var i = 0; i < keys.length; i++) {
      defineReactive$$1(obj, keys[i]);
    }
  };

 /**
   * Observe a list of Array items.
   * 即观察数组项列表
   */
  Observer.prototype.observeArray = function observeArray (items) {
    for (var i = 0, l = items.length; i < l; i++) {
      observe(items[i]);
    }
  };