稍微学一下Vue的数据响应式（Vue2及Vue3区别）

function def(obj, key, val, enumerable) {
 Object.defineProperty(obj, key, {
  value: val,
  enumerable: !!enumerable,
  writable: true,
  configurable: true
 })
}

class Observer {
 constructor(value) {
  this.value = value;
  def(value, '__ob__', this);
  if (!Array.isArray(value)) {
   this.walk(value);
  }
 }
 walk(obj) {
  for (const [key, value] of Object.entries(obj)) {
   defineReactive(obj, key, value);
  }
 }
}

function defineReactive(data, key, val) {
 let childOb = observe(val);
 Object.defineProperty(data, key, {
  enumerable: true,
  configurable: true,
  get: function () {
   // 读取 data[key] 时触发
   console.log('getter', val);
   return val;
  },
  set: function (newVal) {
   // 修改 data[key] 时触发
   console.log('setter', newVal);
   if (val === newVal) {
    return;
   }
   val = newVal;
  }
 })
}

function observe(value, asRootData) {
 if (typeof val !== 'object') {
  return;
 }
 let ob;
 if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
  ob = value.__ob__;
 } else {
  ob = new Observer(val);
 }
 return ob;
}

const people = {
 name: 'c',
 age: 12,
 parents: {
  dad: 'a',
  mom: 'b'
 },
 mates: ['d', 'e']
};
new Observer(people);
people.name; // getter c
people.age++; // getter 12 setter 13
people.parents.dad; // getter {} getter a

const ArrayProto = Array.prototype;
const arrayMethods = Object.create(ArrayProto);
;[
 'push',
 'pop',
 'shift',
 'unshift',
 'splice',
 'sort',
 'reverse'
].forEach(method => {
 const original = ArrayProto[method];
 Object.defineProperty(arrayMethods, method, {
  value: function mutator(...args) {
   console.log('mutator:', this, args);
   return original.apply(this, args);
  },
  enumerable: false,
  writable: true,
  configurable: true
 })
})

class Observer {
 constructor(value) {
  this.value = value;
  def(value, '__ob__', this);
  if (Array.isArray(value)) {
   value.__proto__ = arrayMethods;
  } else {
   this.walk(value);
  }
 }
 walk(obj) {
  for (const [key, value] of Object.entries(obj)) {
   defineReactive(obj, key, value);
  }
 }
}

const people = {
 name: 'c',
 age: 12,
 parents: {
  dad: 'a',
  mom: 'b'
 },
 mates: ['d', 'e']
};
new Observer(people);
people.mates[0]; // getter (2) ["d", "e"]
people.mates.push('f'); // mutator: (2) ["d", "e"] ["f"]

function defineReactive(data, key, val) {
 let childOb = observe(val);
 // 处理每个响应式数据时都创建一个对象用来收集依赖
 let dep = new Dep();
 Object.defineProperty(data, key, {
  enumerable: true,
  configurable: true,
  get: function () {
   // 收集依赖
   dep.depend();
   return val;
  },
  set: function (newVal) {
   if (val === newVal) {
    return;
   }
   val = newVal;
   // 通知依赖更新
   dep.notify();
  }
 })
}

class Dep {
 constructor() {
  this.subs = [];
 }
 addSub(sub) {
  this.subs.push(sub);
 }
 removeSub(sub) {
  if (this.subs.length) {
   const index = this.subs.indexOf(sub);
   this.subs.splice(index, 1);
  }
 }
 depend() {
  if (window.target) {
   this.addSub(window.target);
  }
 }
 notify() {
  const subs = this.subs.slice();
  for (let i = 0; i < subs.length; i++) {
   subs[i].update();
  }
 }
}

class Observer {
 constructor(value) {
  this.value = value;
  this.dep = new Dep();
  def(value, '__ob__', this);
  if (Array.isArray(value)) {
   value.__proto__ = arrayMethods;
  } else {
   this.walk(value);
  }
 }
 walk(obj) {
  for (const [key, value] of Object.entries(obj)) {
   defineReactive(obj, key, value);
  }
 }
}

function defineReactive(data, key, val) {
 let childOb = observe(val);
 let dep = new Dep();
 Object.defineProperty(data, key, {
  enumerable: true,
  configurable: true,
  get: function () {
   dep.depend();
   // 给 Observer 实例上的 dep 属性收集依赖
   if (childOb) {
    childOb.dep.depend();
   }
   return val;
  },
  ...
 })
}

;[
 'push',
 'pop',
 'shift',
 'unshift',
 'splice',
 'sort',
 'reverse'
].forEach(method => {
 const original = ArrayProto[method];
 def(arrayMethods, method, (...args) => {
  const result = original.apply(this, args);
  const ob = this.__ob__;
  ob.dep.notify();
  return result;
 })
})

class Watcher {
 constructor(vm, expOrFn, cb) {
  this.vm = vm;
  // 保存通过表达式获取数据的方法
  this.getter = parsePath(expOrFn);
  this.cb = cb;
  this.value = this.get();
 }
 get() {
  // 将自身 Watcher 实例挂到全局对象上
  window.target = this;
  // 获取表达式对应的数据
  // 会自动触发该数据的 getter
  // getter 中收集依赖时从全局对象上拿到这个 Watcher 实例
  let value = this.getter.call(this.vm, this.vm);
  window.target = undefined;
  return value;
 }
 update() {
  const oldValue = this.value;
  this.value = this.get();
  // 将旧值与新值传递给回调函数
  this.cb.call(this.vm, this.value, oldValue);
 }
}

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>vue3 demo</title>
</head>
<body>
 <div id="app">
  <div id="count"></div>
  <button id="btn">+1</button>
 </div>
 <script src="/UploadFiles/2021-04-02/vue3.js">

通过示例可以看到实现 Vue3 这个数据响应式需要有 reactive、computed、effect 这几个函数，下面仍然通过从变化侦测及依赖收集两个方面介绍，简单实现这几个函数。
变化侦测


示例中的 reactive 函数是对数据进行响应式化的，因此该函数的功能就类似于 Vue2 中的 defineReactive 函数的 getter/setter 处理，处理后能够对数据的获取及修改操作进行捕获。


const toProxy = new WeakMap()
const toRaw = new WeakMap()

const baseHandler = {
 get(target, key) {
  console.log('Get', target, key)
  const res = Reflect.get(target, key)
  // 递归寻找
  return typeof res == 'object' "htmlcode">

const baseHandler = {
 get(target, key) {
  const res = Reflect.get(target, key)
  // 收集依赖
  track(target, key)
  return typeof res == 'object' "htmlcode">

const effectStack = []
const targetMap = new WeakMap()



接下来定义这收集依赖及触发依赖更新这两个函数：


function track(target, key) {
 // 从栈中拿到待收集的依赖对象
 let effect = effectStack[effectStack.length - 1]
 if (effect) {
  // 通过 target 及 key 从依赖映射表中拿到对应的依赖列表（Set类型）
  // 首次需要对依赖映射表初始化
  let depsMap = targetMap.get(target)
  if (depsMap === undefined) {
   depsMap = new Map()
   targetMap.set(target, depsMap)
  }
  let dep = depsMap.get(key)
  if (dep === undefined) {
   dep = new Set()
   depsMap.set(key, dep)
  }
  // 若 target.key 对应的依赖列表中不存在该依赖则收集
  if (!dep.has(effect)) {
   dep.add(effect)
  }
 }
}





function trigger(target, key, info) {
 // 依赖映射表中取出 target 相关数据
 const depsMap = targetMap.get(target)
 if (depsMap === undefined) {
  return
 }
 // 普通依赖对象的列表
 const effects = new Set()
 // 计算属性依赖对象的列表
 const computedRunners = new Set()
 if (key) {
  // 取出 key 相关的依赖列表遍历分类存入 effects 及 computedRunners
  let deps = depsMap.get(key)
  deps.forEach(effect => {
   if (effect.computed) {
    computedRunners.add(effect)
   } else {
    effects.add(effect)
   }
  })
 }
 // 遍历执行所有依赖对象
 const run = effect=> effect()
 effects.forEach(run)
 computedRunners.forEach(run)
}



track 及 trigger 的大致代码也很简单，track 是拿到待收集的依赖对象 effect 后收集到 effectStack，trigger 是从 effectStack 拿到对应的依赖列表遍历执行。
到现在就差这个依赖对象了，根据上面 trigger 函数可以知道，这个依赖 effect 首先是个函数可以执行，并且还有自身属性，如 computed 表示其为一个计算属性的依赖，有时会根据该标识进行写特殊处理。
下面开始介绍这个依赖对象是如何产生的：


// 创建依赖对象
function createReactiveEffect(fn, options) {
 const effect = function effect(...args) {
  return run(effect, fn, args)
 }
 effect.computed = options.computed
 effect.lazy = options.lazy
 return effect
}

function run(effect, fn, args) {
 if (!effectStack.includes(effect)) {
  try {
   effectStack.push(effect)
   return fn(...args)
  } finally {
   effectStack.pop()
  }
 }
}




createReactiveEffect 是一个高阶函数，内部创建了一个名为 effect 的函数，函数内部返回的是一个 run 函数，run 函数中将依赖 effect 对象存入全局的待收集依赖栈 effectStack 中，并执行传入的回调函数，该回调函数其实就是一开始示例中 effect 函数传入的修改 Dom 的函数。也就是说依赖对象作为函数直接执行就会添加依赖到全局栈并执行回调函数。
回调函数中如果有读取了响应式数据的话则会触发 proxy 的 get 收集依赖，这时就能从 effectStack 上拿到该依赖对象了。
然后给 effect 增加了 computed lazy 属性后返回。
最后就是对外暴露的 effect 及 computed 函数了：


// 创建依赖对象并判断非计算属性则立即执行
function effect(fn, options = {}) {
 let e = createReactiveEffect(fn, options)
 if (!options.lazy) {
  e()
 }
 return e
}

// computed 内部调用 effect 并添加计算属性相关的 options
function computed(fn) {
 const runner = effect(fn, {
  computed: true,
  lazy: true
 })
 return {
  effect: runner,
  get value() {
   return runner()
  }
 }
}




computed 就不多说了，effect 就是将传入的回调函数传给 createReactiveEffect 创建依赖对象，然后执行依赖对象就会执行回调函数并收集该依赖对象。
总结



  
reactive 将传入的数据对象使用 proxy 包装，通过 proxy 的 get set 拦截数据的获取及修改，与 Vue2 的 defineProperty 一样，在 get 中收集依赖，在 set 中触发依赖；
  
effect 函数接受一个回调函数作为参数，将回调函数包装一下作为依赖对象后执行回调函数，回调函数执行时触发相关数据的 get 后进行依赖收集；


到此 Vue2 及 Vue3 中的数据响应式原理都分析完了。
Vue2 及 Vue3 数据响应式的对比


本次 Vue 对于数据响应式的升级主要在变化侦测部分。
Vue2 中的变化侦测实现对 Object 及 Array 分别进行了不同的处理，Objcet 使用了

Object.defineProperty API ，Array 使用了拦截器对 Array 原型上的能够改变数据的方法进行拦截。虽然也实现了数据的变化侦测，但存在很多局限 ，比如对象新增属性无法被侦测，以及通过数组下边修改数组内容，也因此在 Vue2 中经常会使用到 $set 这个方法对数据修改，以保证依赖更新。
Vue3 中使用了 es6 的 Proxy API 对数据代理，没有像 Vue2 中对原数据进行修改，只是加了代理包装，因此首先性能上会有所改善。其次解决了 Vue2 中变化侦测的局限性，可以不使用 $set 新增的对象属性及通过下标修改数组都能被侦测到。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

        

            
上一篇：JavaScript实现简单随机点名器
            
下一篇：vue实现element表格里表头信息提示功能(推荐)