vue-vue2和vue3响应式原理的区别

核心要点

• vue2数据响应式的实现
• vue3数据响应式的实现
• vue2和vue3响应式原理的区别

1、vue2数据响应式

vue 2 是通过 Object.defineProperty 来实现数据 读取和更新时的操作劫持，通过更改默认的 getter/setter 函数，在 get 过程中收集依赖，在 set 过程中派发更新的；

通过下面的简易代码来分析

// 响应式数据处理，构造一个响应式对象
class Observer {
   
  constructor(data) {
   
    this.data = data
    this.walk(data)
  }

  // 遍历对象的每个 已定义 属性，分别执行 defineReactive
  walk(data) {
   
    if (!data || typeof data !== 'object') {
   
      return
    }

    Object.keys(data).forEach(key => {
   
      this.defineReactive(data, key, data[key])
    })
  }

  // 为对象的每个属性重新设置 getter/setter
  defineReactive(obj, key, val) {
   
    // 每个属性都有单独的 dep 依赖管理
    const dep = new Dep()

    // 通过 defineProperty 进行操作代理定义
    Object.defineProperty(obj, key, {
   
      enumerable: true,
      configurable: true,
      // 值的读取操作，进行依赖收集
      get() {
   
        if (Dep.target) {
   
          dep.depend()
        }
        return val
      },
      // 值的更新操作，触发依赖更新
      set(newVal) {
   
        if (newVal === val) {
   
          return
        }
        val = newVal
        dep.notify()
      }
    })
  }
}

// 观察者的构造函数，接收一个表达式和回调函数
class Watcher {
   
  constructor(vm, expOrFn, cb) {
   
    this.vm = vm
    this.getter = parsePath(expOrFn)
    this.cb = cb
    this.value = this.get(