Vue 官方团队于 2020 年 9 月 18 日晚 11 点半左右发布了Vue3.0版本 🎉。代号为One Piece。

Vue 3.0 终于发布了，具体更新内容详见 v3.0.0。官网地址 Vue，但内容还都是英文的，毕竟刚发布嘛，中文内容还没那么快。

索性不如自己阅读仓库文档，看看 Vue3 都给我们带来了哪些具体变化。

深入响应式原理

现在是时候深入一下了！Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是被代理的 JavaScript 对象。而当你修改它们时，视图会进行更新。这使得状态管理非常简单直接，不过理解其工作原理同样重要，这样你可以避开一些常见的问题。在这个章节，我们将研究一下 Vue 响应式系统的底层的细节。

在 Vue Mastery 网站观看免费的深入响应式视频，加载不出请点击下方链接

Vue Mastery 观看深入响应式原理视频

什么是响应式

这个术语最近在程序设计中经常被提及，但人们在提及它的时候指的是什么呢？响应式是一种编程范式，允许我们以声明的方式调整变化。人们通常展示的具有代表性的例子，也是很好的例子，就是一个 excel 电子表格。

视频加载不出，请点击下方链接：

excel电子表格演示视频

如果将数字 2 放在第一个单元格中，将数字 3 放在第二个单元格中并进行 SUM 求和，则电子表格会将其计算出来给你。这没什么惊奇的。但如果你更新第一个数字，SUM 也会自动进行更新求和。

JavaScript 通常不是这样工作的 —— 如果我们想用 JavaScript 编写类似的内容：

var val1 = 2
var val2 = 3
var sum = val1 + val2

// sum
// 5

val1 = 3

// sum
// 5

如果我们更新第一个值，sum 不会跟着变化。

那么我们如何用 JavaScript 实现这一点呢？

检测何时其中会有一个值发生变化
用跟踪 (track) 函数修改它
用触发 (trigger) 函数更新为最新的值

Vue 如何追踪变化？

当把一个普通的 JavaScript 对象作为 data 选项传给应用或组件实例的时候，Vue 会遍历其所有 property ，并使用带有 getter 和 setter 的处理程序将其转换为Proxy。这是 ES6 仅有的特性，但是我们在 Vue 3 提供了使用老技术 Object.defineProperty 来支持 IE 浏览器的版本。两者对外暴露相同的 API，但是 Proxy 版本更精简，同时提升了性能。

See the Pen <a href='https://codepen.io/sdras/pen/zYYzjBg'>Proxies and Vue's Reactivity Explained Visually</a> by Sarah Drasner (<a href='https://codepen.io/sdras'>@sdras</a>) on <a href='https://codepen.io'>CodePen</a>.

该部分迫切需要掌握部分 Proxy 的知识帮助理解！所以，让我们深入了解一下。关于 Proxy 的文献很多，但是你真正需要知道的是 Proxy 是包裹另一个对象或函数，并允许你对其进行拦截的对象。

我们是这样使用它的：new Proxy(target, handler)

const dinner = {
  meal: 'tacos'
}

const handler = {
  get(target, prop) {
    return target[prop]
  }
}

const proxy = new Proxy(dinner, handler)
console.log(proxy.meal)

// tacos

好的，到目前为止，我们只是包装这个对象并返回它。很酷，但是没什么用。不过注意，我们把对象包装在 Proxy 里的同时可以对其进行拦截。这种拦截被称为捕获器。

const dinner = {
  meal: 'tacos'
}

const handler = {
  get(target, prop) {
    console.log(‘intercepted!’)
    return target[prop]
  }
}

const proxy = new Proxy(dinner, handler)
console.log(proxy.meal)

// intercepted!
// tacos

除了控制台日志，我们可以在这里做任何我们想做的事情。如果愿意，我们甚至可以不返回实际值。这就是为什么 Proxy 在创建 API 层面如此强大。

此外，Proxy 还提供了另一个特性。我们不必像这样返回值：target[prop]，而是可以进一步使用一个名为 Reflect 的方法，它允许我们正确地执行 this 绑定，就像这样：

const dinner = {
  meal: 'tacos'
}

const handler = {
  get(target, prop, receiver) {
    return Reflect.get(...arguments)
  }
}

const proxy = new Proxy(dinner, handler)
console.log(proxy.meal)

// intercepted!
// tacos

我们之前提到过，为了拥有一个能够在某些内容发生变化时更新最终值的 API，我们必须在内容发生变化时设置新的值。我们在一个名为 track 的处理器函数中执行此操作，该函数传入 target 和 key两个参数。

const dinner = {
  meal: 'tacos'
}

const handler = {
  get(target, prop, receiver) {
    track(target, prop)
    return Reflect.get(...arguments)
  }
}

const proxy = new Proxy(dinner, handler)
console.log(proxy.meal)

// intercepted!
// tacos

最后，当某些内容发生改变时我们会设置新的值。为此，我们将通过 trigger 变化在新 proxy 设置这些更新：

const dinner = {
  meal: 'tacos'
}

const handler = {
  get(target, prop, receiver) {
    track(target, prop)
    return Reflect.get(...arguments)
  },
  set(target, key, value, receiver) {
    trigger(target, key)
    return Reflect.set(...arguments)
  }
}

const proxy = new Proxy(dinner, handler)
console.log(proxy.meal)

// intercepted!
// tacos

还记得前几段落的列表吗？现在我们有了一些关于如何用 Vue 处理这些更改的答案：

~~检测什么时候某个值发生了变化~~：我们不再需要这样做，因为 Proxy 允许我们拦截它
跟踪更改它的函数：我们在 Proxy 中的 getter 中执行此操作，称为 effect
触发函数以便它可以更新最终值：我们在 Proxy 中的 setter 中进行该操作，名为 trigger

Proxy 对象对于用户来说是不可见的，但是在内部，它们使 Vue 能够在 property 的值被访问或修改的情况下进行依赖跟踪和变更通知。从 Vue 3 开始，我们可以在独立的包中使用响应式。有一点需要注意的是，当转换后的数据对象被打印在浏览器控制台式格式是不同的，因此你可能需要安装 vue-devtools，以提供一种更友好的可视界面。

Proxy 对象

Vue 在内部跟踪所有已被设置为响应式的对象，因此它始终会返回同一个对象的 Proxy 版本。

当从响应式 Proxy 访问嵌套对象时，该对象在返回之前也被转换为 Proxy：

const handler = {
  get(target, prop, receiver) {
    track(target, prop)
    const value = Reflect.get(...arguments)
    if (isObject(value)) {
      return reactive(value)
    } else {
      return value
    }
  }
  // ...
}

Proxy VS 原始标识

Proxy 的使用确实引入了一个需要注意的新警告：被代理对象与原始对象全等比较符(===)下不相等。例如：

const obj = {}
const wrapped = new Proxy(obj, handlers)

console.log(obj === wrapped) // false

在大多数情况下，原始版本和包装版本的行为相同，但请注意，它们在依赖严格比较的操作下将会有所不同的，例如 .filter() 或 .map()。当使用选项 API 时这些警告不太可能出现，因为所有响应式状态都是通过 this 访问的，并保证它们已经被 Proxy 过。

但是，当使用合成 API 显式地创建响应式对象时，最佳实践是不要保留对原生对象的引用，而只对响应式版本操作：

const obj = reactive({
  count: 0
}) // 不引用原对象

监听器（观察者）

每个组件实例都有一个对应的监听器实例，它记录了组件渲染过程中 "触及 "的任何属性，作为依赖关系。之后，当依赖项的 setter 触发时，它会通知监听器，从而使得组件重新渲染。

See the Pen <a href='https://codepen.io/sdras/pen/GRJZddR'>Second Reactivity with Proxies in Vue 3 Explainer</a> by Sarah Drasner (<a href='https://codepen.io/sdras'>@sdras</a>) on <a href='https://codepen.io'>CodePen</a>.

当你把对象作为数据传递给组件实例时，Vue 会将其转换为 Proxy。这个 Proxy 使 Vue 能够在 property 被访问或修改时执行依赖项跟踪和变更通知。每个 property 都被视为一个依赖项。

首次渲染后，组件将跟踪一组依赖列表——即在渲染过程中被访问的 property。反过来，组件就成了其每个 property 的订阅者。当 Proxy 拦截到 set 操作时，property 将通知其所有订阅的组件重新渲染。

如果你使用的是 Vue2.x 及以下版本，你可能会对这些版本中存在的一些更改检测警告感兴趣，这里有更多值得探索的细节。

Vue3 文档阅读 —— 深入响应式原理