vue的响应式原理

什么是响应式原理

在改变数据的时候，视图会跟着更新。 VUE利用Object.defineProperty的方法里面的setter 和 getter方法的 观察者模式 来实现的。

Object.defindProperty

这个方法就是在一个对象上定义一个新的属性，或者改变一个对象现有的属性，并且返回一个对象。里面有两个字段 set 和 get 。 顾名思义，set 就是设置属性的值， 而 get 就是获取属性的值。
举个例子：

var bValue="默认值", o = {};
Object.defineProperty(o, "b" , {
      get: function () {
          console.log('监听正在读取的b')
          return bValue;
      },
      set: function (newValue) {
          console.log('监听正在设置b')
          bValue = newValue
      },
      enumerable: true,
      configurable: true
  })
  console.log(o.b)
  o.b = '修改值'
  console.log(o.b)

最终打印

上述例子，我们可以看到出来 ，在对 o.b赋值的时候， 就会调用 set 函数， 取值的时候 ，则会调用 get 函数。
掌握到这里 ，我们就可以简单的模拟下 vue 的 双向数据绑定了。

<input type="text" name="" id="input">
<div id="div"></div>

const input = document.getElementById('input');
const div = document.getElementById('div');
 let obj = {}
 Object.defineProperty(obj,"msg",{
     set (newVal) {
         input.value = newVal
         div.innerHTML = newVal
     }
 })
 
 input.addEventListener('keyup', function(event){
     obj.msg = event.target.value
 })

总结 Vue 中的响应式原理

第一步：组件初始化的时候，先给每一个Data属性都注册getter和setter,也就是reactive化。然后，再new一个自己的Watcher对象，此时Watcher会立即调用组件的render函数去生产虚拟DOM。在调用 render的时候，就会需要用到data的属性值， 此时会触发getter函数，将当前的Watcher函数注册进 sub 里。

第二步：当data属性 发送改变之后，就会遍历sub里所有的watcher对象，通知它们去重新渲染组件。