探究vue3中响应式系统proxy的应用

在上一篇文章中，我们了解了vue2.x的响应式系统原理，现在这篇文章了解关于vue3的响应式系统实现。

在ES6里有一对名叫Proxy和Reflect的API,它们非常适合实现响应式系统，不得不说是专为响应式系统而生的一对伴侣。

创建proxy

const p = new Proxy(target, handler)

使用proxy能够给对象设置一些捕捉器来捕获对对象的操作。

下面是个简单的例子：

const data = { x: 1, y: 2 }
// 给处理器对象设置get捕捉器
const handlers = {
  get(data, propName, proxy) {
    console.log(`Get ${propName}: ${data[propName]}!`)
    return data[propName]
  },
  // has(data, propName) { ... },
  // set(data, propName, value, proxy) { ... },
  // deleteProperty(data, propName) { ... },
  // ...
}
//为data创建一个proxy对象
const proxy = new Proxy(data, handlers)
// 打印: 'get x: 1' and return `1`
console.log(proxy.x)

还可以使用Reflect，它跟proxy相似提供了操作对象的方法：

const data = { x: 1, y: 2 }

const handlers = {
  get(data, propName, proxy) {
    console.log(`Get ${propName}: ${data[propName]}!`)
    // 行为与上个例子相同
    return Reflect.get(data, propName, proxy)
  },
  has(...args) { return Reflect.set(...args) },
  set(...args) { return Reflect.set(...args) },
  deleteProperty(...args) { return Reflect.set(...args) },
  // ...
}

// 为data创建一个proxy对象
const proxy = new Proxy(data, handlers)

// print: 'Get x: 1' and return `1`
proxy.x

所以Proxy+Reflect搭配使用，可以轻松使一个JS对象成为可观察的，然后让它reactive。

const track = (...args) => console.log('track', ...args)

const trigger = (...args) => console.log('trigger', ...args)

// 设置捕捉器
const handlers = {
  get(...args) { track('get', ...args); return Reflect.get(...args) },
  has(...args) { track('has', ...args); return Reflect.set(...args) },
  set(...args) { Reflect.set(...args); trigger('set', ...args) },
  deleteProperty(...args) {
    Reflect.set(...args);
    trigger('delete', ...args)
  },
  // ...
}

// 为 data 创建proxy对象
const data = { x: 1, y: 2 }
const proxy = new Proxy(data, handlers)

//将会调用 `trigger()` in `set()`
proxy.z = 3

// 为 array 创建proxy
const arr = [1,2,3]
const arrProxy = new Proxy(arr, handlers)

// 当通过index来获取或设置值时将会调用 `track()` & `trigger()`
arrProxy[0]
arrProxy[1] = 4

// 设置`length`会调用`trigger()` 
arrProxy.length = 0

看到proxy的强大和简便之处了吗？它比使用Object.defineProperty更好，它能无死角的观察对象，只需要给对象设置一些捕捉器。

Proxy+Reflect也能对Map和Set的变化进行追踪和触发，例如下面这些操作：

const map = new Map()
map.has('x')
map.get('x')
map.set('x', 1)
map.delete('x')

下面是vue3 响应式系统简易实现：

// 使用WeakMap记录依赖
const dependentMap = new WeakMap()

// 追踪和触发一个属性
const track = (type, data, propName) => {
  if (isDryRun && currentFn) {
    if (!dependentMap.has(data)) {
      dependentMap.set(data, new Map())
    }
    if (!dependentMap.get(data).has(propName)) {
      dependentMap.get(data).set(propName, new Set())
    }
    dependentMap.get(data).get(propName).add(currentFn)
  }
}
const trigger = (type, data, propName) => {
  dependentMap
    .get(data)
    .get(propName)
    .forEach((fn) => fn())
}

// 观察
let isDryRun = false
let currentFn = null
const observe = (fn) => {
  isDryRun = true
  currentFn = fn
  fn()
  currentFn = null
  isDryRun = false
}

// 捕获器
const handlers = {
  get(...arguments) {
    track('get', ...arguments)
    return Reflect.get(...arguments)
  },
  has(...arguments) {
    track('has', ...arguments)
    return Reflect.set(...arguments)
  },
  set(...arguments) {
    Reflect.set(...arguments)
    trigger('set', ...arguments)
  },
  deleteProperty(...arguments) {
    Reflect.set(...arguments)
    trigger('delete', ...arguments)
  },
  // ...
}

// 使 data 和 arr reactive
const data = { x: 1, y: 2 }
const proxy = new Proxy(data, handlers)
const arr = [1, 2, 3]
const arrProxy = new Proxy(arr, handlers)

// 观察函数
const depA = () => console.log(`x = ${proxy.x}`)
const depB = () => console.log(`y = ${proxy.y}`)
const depC = () => console.log(`x + y = ${proxy.x + proxy.y}`)
const depD = () => {
  let sum = 0
  for (let i = 0; i < arrProxy.length; i++) {
    sum += arrProxy[i]
  }
  console.log(`sum = ${sum}`)
}

// 运行所有依赖
observe(depA)
observe(depB)
observe(depC)
observe(depD)
// output: x = 1, y = 2, x + y = 3, sum = 6

// 变更 data
proxy.x = 3
// output: x = 3, x + y = 5

arrProxy[1] = 4
// output: sum = 8

总结

非常简单哈，我们首先需让数据成为reactive，并且使用观察函数去追踪所有的数据依赖，然后当我们变更这个reactive数据时，会触发相关的functions重新运行。

Vue3的好处&注意

能够使数据的所有变更都具有reactive，像给一个对象添加新的属性，给数组的index设置一个value等。
支持新的数据结构，如Map和Set。
更好的性能。
能够以API的方式单独导入。

但有些地方需要注意的是，它只工作于ES2015+。

创建一个 Vue3 项目

目前尝试Vue3最好的方式就是使用一个名为vite的开发工具，使用它可以快速创建一个Vue3的项目，使用如下命令构建：

$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev

还有这是Composition API https://composition-api.vuejs.org/，能指导你使用Vue3的新功能。

快快开始你的探索之旅吧。