告别 $set，拥抱 Proxy#

时代的眼泪：Object.defineProperty#

在 Vue 2 时代，尤雨溪利用 Object.defineProperty 劫持了对象的 get 和 set。这很天才，但有硬伤：

1. 数组监听难：必须重写数组的 7 个变异方法（push, pop…），而且还监听不到数组索引的变化。
2. 对象新增属性：对象创建后，再给它加个新属性，Vue 是瞎子。所以必须用 Vue.set。
3. 递归性能：初始化时必须递归遍历对象的所有层级，数据量一大，启动就慢。

新皇登基：Proxy#

Vue 3 使用了 ES6 的 Proxy。它不劫持属性，而是直接劫持 整个对象。

1
const handler = {
2
    get(target, key) {
3
        track(target, key) // 收集依赖
4
        return Reflect.get(target, key)
5
    },
6
    set(target, key, value) {
7
        trigger(target, key) // 触发更新
8
        return Reflect.set(target, key, value)
9
    }
10
}
11
const proxy = new Proxy(data, handler)

降维打击#

1. 全方位感知：不管是数组索引、还是对象新增属性，Proxy 都能拦截到。
2. 懒加载：只有当你访问嵌套对象时，Vue 3 才会临时给那一层做代理。不需要在启动时一次性递归到底。性能提升显著！

所以，兄弟们，如果还在守着 Vue 2 的老项目，是时候考虑重构了。为了那个消失的 $set，也值了。