Vue3响应式与旧版有何不同，Proxy真的无所不能？

本文共计4870个文字，预计阅读时间需要20分钟。

前言：大家都知道，Vue2 里的响应式机制实际上是一个半完全体。对于对象上新增的属性无法为力，对于数组则需截断其原型方法来实现响应式。

举例：let vm=new Vue({ data() { “}}

前言

大家都知道，Vue2 里的响应式其实有点像是一个半完全体，对于对象上新增的属性无能为力，对于数组则需要拦截它的原型方法来实现响应式。

举个例子：

let vm = new Vue({ data() { return { a: 1 } } }) // ❌ oops，没反应！ vm.b = 2

let vm = new Vue({ data() { return { a: 1 } }, watch: { b() { console.log('change !!') } } }) // ❌ oops，没反应！ vm.b = 2

这种时候，Vue 提供了一个 api：this.$set，来使得新增的属性也拥有响应式的效果。

但是对于很多新手来说，很多时候需要小心翼翼的去判断到底什么情况下需要用 $set，什么时候可以直接触发响应式。
总之，在 Vue3 中，这些都将成为过去。本篇文章会带你仔细讲解，proxy 到底会给 Vue3 带来怎么样的便利。并且会从源码级别，告诉你这些都是如何实现的。