vue如何获知json变化

Vue.js 中如何优雅地感知与响应 JSON 数据的变化**

在 Vue.js 的开发实践中，我们经常需要处理 JavaScript 对象（JSON 数据是其常见表现形式），Vue 的核心特性之一就是其响应式系统，它能够使得数据变化时，视图自动更新，Vue 是如何“获知” JSON 数据发生变化的呢？理解这一点对于编写高效、可维护的 Vue 应用至关重要，本文将探讨 Vue 2 和 Vue 3 中感知 JSON 变化的机制及最佳实践。

Vue 2 的响应式原理：Object.defineProperty

在 Vue 2 中，Vue 通过 Object.defineProperty 方法来劫持（或说“封装”）对象属性的读取和修改操作,从而实现数据的响应式。

初始化阶段

当你在 Vue 实例的 data 选项中定义一个对象（如 user: { name: 'Alice', age: 25 }）时，Vue 会遍历这个对象的所有属性，并使用 Object.defineProperty 将它们转换为 getter 和 setter。

Getter：当组件读取该属性时，getter 会被调用，Vue 会在此刻记录下这个依赖，即“哪个组件/哪个 Watcher 依赖了这个属性”，这个过程被称为“依赖收集”。
Setter：当组件修改该属性时，setter 会被调用，setter 会通知 Vue 这个属性发生了变化，Vue 会找到所有依赖了这个属性的 Watcher，并触发它们的更新,从而使视图重新渲染。

Vue 如何获知 JSON 变化？

基于上述原理，Vue 2 能够获知以下情况的变化：

直接修改响应式对象的属性：

this.user.name = 'Bob'; // Vue 能检测到变化，视图会更新
this.user.age = 26;     // Vue 能检测到变化，视图会更新

修改响应式对象的嵌套属性：

this.user.address = { city: 'New York' }; // Vue 能检测到 address 属性的赋值
this.user.address.city = 'Boston';        // Vue 2 默认无法直接检测到嵌套对象内部属性的变化！

Vue 2 的局限性

Vue 2 的 Object.defineProperty 主要存在以下局限，导致某些 JSON 变化无法被自动检测：

无法检测对象属性的添加或删除：
```
this.user.gender = 'female'; // Vue 无法检测到，视图不会更新
delete this.user.age;        // Vue 无法检测到，视图不会更新
```
解决方案：使用 Vue.set(this.user, 'gender', 'female') 或 this.$set(this.user, 'gender', 'female') 来添加属性；使用 Vue.delete(this.user, 'age') 或 this.$delete(this.user, 'age') 来删除属性。
无法检测数组索引的直接修改和长度变化：
```
this.user.hobbies[0] = 'Reading'; // Vue 无法检测到
this.user.hobbies.length = 1;     // Vue 无法检测到
```
解决方案：使用 Vue.set(this.user.hobbies, 0, 'Reading') 或 this.user.hobbies.splice(0, 1, 'Reading') 来修改数组元素；通过 this.user.hobbies.splice(newLength) 来改变长度（splice 是 Vue 已经做特殊处理的数组方法之一）。
无法检测对象嵌套层级较深的属性变化：如前面 this.user.address.city = 'Boston' 所示，Vue 2 只能劫持到 address 属性的 getter/setter，而 address 内部对象的属性变化无法被直接监听到，需要整体替换嵌套对象或使用 Vue.set。

Vue 3 的响应式原理：Proxy

Vue 3 引入了 Proxy 来实现响应式系统，这解决了 Vue 2 中大部分的局限性。

Proxy 的工作方式

Proxy 是 ES6 引入的一个新特性，它可以在目标对象之前架设一层“拦截”，外界对该对象的访问都必须先通过这层拦截，这个拦截层可以代理（或说“代理”）对目标对象的操作，例如属性读取、赋值、函数调用等。

当你在 Vue 3 的 setup() 或 ref/reactive 中定义一个响应式对象时，Vue 内部会创建一个该对象的 Proxy 实例。

Vue 3 如何获知 JSON 变化？

Proxy 提供了更强大的拦截能力，使得 Vue 3 能够检测到更广泛的 JSON 变化：

直接修改属性、添加属性、删除属性：

const user = reactive({ name: 'Alice' });
user.name = 'Bob';      // Vue 能检测到
user.age = 25;          // Vue 能检测到（添加属性）
delete user.name;       // Vue 能检测到（删除属性）

数组索引修改、长度变化、数组方法：

const hobbies = reactive(['coding', 'music']);
hobbies[0] = 'reading'; // Vue 能检测到
hobbies.length = 1;     // Vue 能检测到
hobbies.push('sports'); // Vue 能检测到

嵌套对象属性变化：

const user = reactive({ address: { city: 'New York' } });
user.address.city = 'Boston'; // Vue 能检测到深层嵌套属性变化！

其他操作：对于 in 操作符、for...in、Object.keys()、Object.getOwnPropertySymbols()、Object.getOwnPropertyNames() 等操作，Proxy 也能提供拦截并正确触发响应式更新。

Vue 3 的优势

Proxy 的引入使得 Vue 3 的响应式系统更加完善和强大：

更全面的响应式覆盖：解决了 Vue 2 中无法检测属性添加/删除、数组索引修改、深层嵌套对象变化等问题。
原生支持：Proxy 是 JavaScript 原生支持的，不需要像 Vue 2 那样对每个属性进行遍历和劫持，性能上在某些场景下更优（尤其对于大型对象）。
更好的 TypeScript 支持：Proxy 的类型推断比 Object.defineProperty 更容易，使得 Vue 3 与 TypeScript 的集成更加顺畅。

实践中的注意事项与最佳实践

无论使用 Vue 2 还是 Vue 3，理解如何正确地触发 JSON 数据的变化响应都是关键。

Vue 2 中避免直接修改/添加/删除属性：
- 优先使用 Vue.set / this.$set 和 Vue.delete / this.$delete。
- 对于数组，优先使用变异方法（如 push, pop, shift, unshift, splice, sort, reverse）或 Vue.set。
Vue 3 中直接操作即可，但需注意：
- Vue 3 的响应式系统非常强大，但仍需遵循 JavaScript 的基本规则，如果你直接替换了整个响应式对象（如 user = { name: 'New User' }），那么原始对象的响应性会丢失，除非你使用 reactive 或 ref 重新包装。
- 对于 ref 和 reactive 的使用要清晰：ref 用于基础类型和对象（访问时需 .value），reactive 用于对象。
深度响应式 vs. 浅响应式：
- Vue 2 默认是深度响应式的，但初始化时只会对 data 中已有的属性进行响应式处理。
- Vue 3 中，reactive 返回的是深度响应式对象，如果你只需要浅层响应式，可以使用 shallowRef 或 shallowReactive。
处理非响应式数据或外部数据：
- 当你从外部 API 获取 JSON 数据并需要将其设置为响应式数据时，Vue 2 中需要使用 Vue.set 或 this.$set 将其合并到已有的响应式对象中，或者整体替换（但整体替换不会保留原有响应式属性，除非使用 Object.assign 结合 Vue.set 逐个设置）。
- Vue 3 中，直接使用 reactive 或 ref 包装外部 JSON 数据即可：
```
const fetchData = async () => {
  const response = await fetch('/api/data');
  const jsonData = await response.json();
  // Vue 3
  myReactiveData.value = reactive(jsonData); // myReactiveData 是 ref
  // 或者
  myReactiveData = reactive(jsonData); // 如果在 setup 中直接声明
}
```