Vue响应式原理

POOPE

vue实现数据响应式，是通过数据劫持侦测数据变化，发布订阅模式进行依赖收集与视图更新，换句话说是Observe，Watcher以及Compile三者相互配合。

• Observe实现数据劫持，递归给对象属性，绑定setter和getter函数，属性改变时，通知订阅者
  
• Compile解析模板，把模板中变量换成数据，绑定更新函数，添加订阅者，收到通知就执行更新函数
  
• Watcher作为Observe和Compile中间的桥梁，订阅Observe属性变化的消息，触发Compile更新函数
  

数据劫持/代理 Observer
实现响应式的第一步就是能侦测数r据的变化，在Vue2.x是通过ES5的方法Object.defineProperty()实现对象属性的侦听，在Vue3.x中使用了ES6提供的Proxy对对象进行代理。
Object.defineProperty

function observe(obj) {
  if (!obj || typeof obj !== "object") {
  return;
  }
  Object.keys(obj).forEach((key) => {
  defineReactive(obj, key, obj[key]);
  });
  function defineReactive(obj, key, value) {
  //递归子属性
  observe(value);
  //订阅器
  const dp = new Dep();
  Object.defineProperty(obj, key, {
    configurable: true, //可删除
    enumerable: true, //可枚举遍历
    get: function () {
    /* 将Dep.target（即当前的Watcher对象存入dep的subs中） */
    dp.addSub(Dep.target);
    return value;
    },
    set: function (newValue) {
    //递归新的子属性
    observe(newValue);
    if (value !== newValue) {
      value = newValue;
      /* 在set的时候触发dep的notify来通知所有的Watcher对象更新视图 */
      dp.notify();
    }
    },
  });
  }
}

Proxy实现代理

let target = { name: " xiao" };
let handler = {
  get(target, key) {
  if (typeof target[key] === "object" && target[key] !== "null") {
    return new Proxy(target[key], handler);
  }
  return target[key];
  },
  set: function (target, key, value) {
  target[key] = value;
  },
};
target = new Proxy(target, handler);

依赖收集Dep

//Dep订阅者，依赖收集器
class Dep {
  constructor() {
  /* 用来存放Watcher对象的数组 */
  this.subs = [];
  }
  /* 在subs中添加一个Watcher对象 */
  addSub(sub) {
  this.subs.push(sub);
  }
  /* 在subs中添加一个Watcher对象 */
  notify() {
  this.subs.forEach((sub) => {
    sub.update();
  });
  }
}
//用 addSub 方法可以在目前的 Dep 对象中增加一个 Watcher 的订阅操作；
//用 notify 方法通知目前 Dep 对象的 subs 中的所有 Watcher 对象触发更新操作。

Watcher订阅者

class Watcher {
  constructor(obj, key, cb) {
  /* 在new一个Watcher对象时将该对象赋值给Dep.target，在observe get中会用到 */
  Dep.target = this;
  this.obj = obj;
  this.key = key;
  this.cb = cb;
  //触发getter，依赖收集
  this.value = obj[key];
  //收集完置空Dep.target,防止重复收集
  Dep.target = null;
  }
  update() {
  //获得新值
  this.value = obj[this.key];
  console.log("视图更新");
  }
}

Compile模板编译

• 正则匹配解析vue指令、表达式
  
• 把变量替换成数据初始化渲染
  
• 创建Watcher订阅更新函数
  

//指令处理类
const compileUtile = {
  getVal(expr,vm){
    //reduce用的好啊
    return expr.split('.').reduce((data,curentval)=>{
      return data[curentval];
    },vm.$data)
  },
  html(node,expr,vm){
    new Watcher(vm,expr,(newVal)=>{
      this.updater.htmlUpdate(node,newVal);
    })
    const value = this.getVal(expr,vm);
    this.updater.htmlUpdate(node,value);
  },
  
  //更新函数
  updater:{
    htmlUpdate(node,value){
      node.innerHTML= value;
    },
  }
}
//Compile指令解析器
class Compile{
//各种正则匹配vue指令和表达式，替换数据
}

Object.defineProperty与Proxy的区别？

• Proxy可以直接监听对象，而非属性，可以监听属性的增加
  
• Proxy可以监听数组
  
• Proxy有很多Object.defineProperty不具备的拦截方法
  
• Proxy返回一个新对象，可以直接操作新对象达到目的，Object.defineProperty只能遍历对象属性修改
  

为什么要依赖收集？
数据劫持的目的是在属性变化的时候触发视图更新，依赖收集可以收集到哪些地方使用到了相关属性，属性变化时，就可以通知到所有的地方去更新视图，对于没有使用的属性，也可以避免无用的数据比对更新
Dep和Watcher的关系（多对多）

• data中一个key对应一个Dep实例， 一个Dep实例对应多个Watcher实例（一个属性在多个表达式中使用）
  
• 一个表达式对应一个Watcher实例，一个Watcher对用多个Dep实例（一个表达式中有多个属性）
  

watcher和Dep何时创建

• Dep在初始化data的属性进行数据劫持时创建的
  
• Watcher是在初始化时解析大括号表达式/一般指令时创建
  

如何实现对数组的监听
因为Object.defineProperty不能监听数组长度变化，所以Vue使用了函数劫持的方式，重写了数组的方法，Vue将data中的数组进行了原型链重写，指向了自己定义的数组原型方法。这样当调用数组api时，可以通知依赖更新。如果数组中包含着引用类型，会对数组中的引用类型再次递归遍历进行监控。这样就实现了监测数组变化。

1 // src/core/observer/array.js
 2 
 3 // 获取数组的原型Array.prototype，上面有我们常用的数组方法
 4 const arrayProto = Array.prototype
 5 // 创建一个空对象arrayMethods，并将arrayMethods的原型指向Array.prototype
 6 export const arrayMethods = Object.create(arrayProto)
 7 
 8 // 列出需要重写的数组方法名
 9 const methodsToPatch = [
10   'push',
11   'pop',
12   'shift',
13   'unshift',
14   'splice',
15   'sort',
16   'reverse'
17 ]
18 // 遍历上述数组方法名，依次将上述重写后的数组方法添加到arrayMethods对象上
19 methodsToPatch.forEach(function (method) {
20   // 保存一份当前的方法名对应的数组原始方法
21   const original = arrayProto[method]
22   // 将重写后的方法定义到arrayMethods对象上，function mutator() {}就是重写后的方法
23   def(arrayMethods, method, function mutator (...args) {
24   // 调用数组原始方法，并传入参数args，并将执行结果赋给result
25   const result = original.apply(this, args)
26   // 当数组调用重写后的方法时，this指向该数组，当该数组为响应式时，就可以获取到其__ob__属性
27   const ob = this.__ob__
28   let inserted
29   switch (method) {
30     case 'push':
31     case 'unshift':
32     inserted = args
33     break
34     case 'splice':
35     inserted = args.slice(2)
36     break
37   }
38   if (inserted) ob.observeArray(inserted)
39   // 将当前数组的变更通知给其订阅者
40   ob.dep.notify()
41   // 最后返回执行结果result
42   return result
43   })
44 })

def就是通过Object.defineProperty重写value，也就是自定义的几个数组方法

function def(obj,key,val,enumble){
Object.defineProperty(obj,key,{
 enumble:!!enumble,
 configrable:true,
 writeble:true,
 val:val
 
})
}

observe方法里面加入数组的处理，

• 能获取到__proto__属性，就把__protp__属性指向重写的方法
  
• 获取不到__proto__属性，就把重写的方法定义到对象上实例上
  

// src/core/observer/index.js
export class Observer {
  ...
  constructor (value: any) {
  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)
  }
  }
  ...
}
function protoAugment (target, src: Object) {
  /* eslint-disable no-proto */
  target.__proto__ = src
  /* eslint-enable no-proto */
}
function copyAugment (target: Object, src: Object, keys: Array<string>) {
  for (let i = 0, l = keys.length; i < l; i++) {
  const key = keys[i]
  def(target, key, src[key])
  }
}