Vue变化响应 - 技术栈

响应式侦测

1. 对象侦测

Vue2 实现方式

Vue2 使用 Object.defineProperty 来检测对象的变化。

javascript 复制代码

let car = {}
let val = 3000

Object.defineProperty(car, 'price', {
  enumerable: true,
  configurable: true,
  get() {
    console.log('price属性被读取了')
    return val
  },
  set(newVal) {
    console.log('price属性被修改了')
    val = newVal
  }
})

Vue2 通过递归的 Observer 将对象中的所有属性转换为可观测对象

在 getter 中收集依赖，在 setter 中通知依赖更新

依赖：数据变化的时候会去通知视图，但是不能全局去通知，所以要收集谁使用了这个数据，这个谁，就是依赖

在vue中，谁得到数据谁就是依赖，会给谁创建一个Water实例，用这个实例来代表依赖，由Water去通知真正的依赖，上方那个update就是Water的东西

vue在getter里面收集依赖，在setter里面通知依赖去进行更新

vue为每个数据都建立了一个依赖管理器，把这个数据的所有依赖都管理起来

依赖管理器实现：

javascript 复制代码

// 依赖管理器
export default class Dep {
  constructor() {
    this.subs = []
  }
  
  addSub(sub) {
    this.subs.push(sub)
  }
  
  removeSub(sub) {
    const index = this.subs.indexOf(sub)
    if (index > -1) {
      this.subs.splice(index, 1)
    }
  }
  
  depend() {
    if (window.target) {
      this.addSub(window.target)
    }
  }
  
  notify() {
    const subs = this.subs.slice()
    for (let i = 0, l = subs.length; i < l; i++) {
      subs[i].update() // 通知依赖更新
    }
  }
}

流程：

数据通过监听器转换成拥有 getter 和 setter 的形式

外界通过 Watcher 读取数据，触发 getter 将 Watcher 添加到依赖数组

数据变化时，setter 调用 Watcher（依赖）发送通知

Watcher 最终通知外界，引发视图更新或其他操作

Vue3 实现方式

Vue3 使用 Proxy 来检测变化。

可以直接监听整个对象，无需递归遍历
可以监听新增和删除的属性
性能更好

2. 数组侦测

Vue2 实现方式

数组无法直接使用 Object.defineProperty 进行侦测。

封装数组的原生方法，使其能够被侦测
使用变异方法（mutator methods）来触发更新

Array原型中可以改变数组自身内容的方法有7个，分别是push,pop,shift,unshift,splice,sort,reverse

实现原理：

创建继承自 Array.prototype 的新对象
重写上述7个方法，在调用原生方法后手动触发更新通知
数组依然使用 getter 收集依赖，但通过封装的数组方法感知变化

不足的地方在于，通过下标操作的时候，vue无法监听到，所以vue提供了Vue.set和Vue.delete这几个方法

Vue3 实现方式

Vue3 使用 Proxy 可以监听到数组的所有变化。

可以直接监听数组下标操作
可以监听数组长度的变化
无需特殊处理数组方法

示例：

javascript 复制代码

const array = [1, 2, 3]
const proxy = new Proxy(array, {
  set(target, property, value, receiver) {
    console.log(`数组的${property}属性被修改为${value}`)
    return Reflect.set(target, property, value, receiver)
  }
})

总结对比

特性	Vue2 (Object.defineProperty)	Vue3 (Proxy)
对象监听	需要递归遍历对象属性	直接监听整个对象
新增属性	无法自动侦测，需要Vue.set	自动侦测
删除属性	无法自动侦测，需要Vue.delete	自动侦测
数组监听	重写7个数组方法	直接监听所有变化
数组下标操作	无法侦测	可以侦测
性能	递归初始化成本高	惰性监听，性能更好