摘要
Vue3相比Vue2，在响应式系统上做出了重大优化，核心区别在于由Object.defineProperty升级为Proxy，提升了性能和灵活性。
# 一、Vue2的响应式系统
Vue2的响应式是基于Object.defineProperty来实现的，其工作方式如下：
- Vue在初始化时，通过
Object.defineProperty劫持数据对象的属性，定义getter和setter。 - 当属性被访问时，getter会触发依赖收集。
- 当属性被修改时，setter会触发视图更新。
# 存在的问题
- 无法监听对象新增属性：Vue2的响应式只能劫持已经存在的属性，新增属性不会被检测到。
- 无法监听数组变化：数组的索引变动不会触发视图更新。
- 性能问题：对每个对象属性都要进行遍历并添加getter/setter，对深层嵌套对象的处理较为复杂。
# 二、Vue3的响应式系统
Vue3的响应式系统基于Proxy进行实现，解决了Vue2的诸多痛点。
# Proxy的优势
- 可监听动态新增的属性：使用
Proxy后，无论是新增属性还是删除属性，都能被监听到。 - 支持数组变化：能够正确检测数组的索引变动、
length变化等。 - 性能优化：Vue3只需要代理整个对象，而不是遍历对象的每个属性，提升了响应式的性能。
# Vue3中的响应式API
reactive：用于创建响应式对象。ref：用于创建基本数据类型的响应式变量。readonly：创建只读的响应式对象。shallowReactive和shallowRef：创建浅层响应式数据。
示例代码：
import { reactive, ref } from 'vue';
const state = reactive({ count: 0 });
const message = ref("Hello Vue3");
function increment() {
state.count++;
message.value = "Count is " + state.count;
}
# 三、Vue3响应式的实际应用
Vue3的响应式系统在性能、功能、易用性上都有明显的提升，特别适用于大型项目中的复杂状态管理。建议在开发新项目时优先使用Vue3的reactive和ref，以充分利用新响应式系统的优势。
# 结论
Vue3通过Proxy彻底重构了响应式系统，解决了Vue2在属性新增、数组变动等方面的局限性，使得数据管理更加高效和灵活，提升了整体开发体验。