在 Vue 中，有哪些方式可以观测到对象或数组中某个具体属性的变动？
考察说明
考查对 Vue 响应式原理中属性监听机制的掌握程度。
回答思路
- 【回答框架 1】Vue 2 通过 Object.defineProperty 对 data 中的属性进行劫持，为每个属性建立依赖收集和派发更新。当属性是对象或数组时，会递归遍历其属性进行劫持，但新增或删除属性不会被劫持。
- 【回答框架 2】Vue 2 中数组元素的变化无法通过属性劫持直接检测，因此 Vue 2 重写了数组的 7 个变更方法（push、pop、shift、unshift、splice、sort、reverse），调用这些方法才能触发更新。而通过索引直接修改元素或修改 length 则无法触发。
- 【回答框架 3】Vue 3 使用 Proxy 代理整个对象，可以拦截属性的读取、设置、删除等操作，因此新增、删除属性以及数组索引赋值都能被侦测到，响应式范围更广。
- 【回答框架 4】对于无法自动侦测的变更，Vue 2 提供 Vue.set 和 vm.$set 方法添加新属性并使其响应式，Vue 3 中则直接使用响应式 API 如 reactive 和 ref。
- 【回答框架 5】在实际项目中监听属性变化时，还可以使用 watch 选项或 watchEffect，但需注意 deep 选项对性能的影响，以及数组索引和 length 变化的限制。
- 【关键点 1】Vue 2 基于 Object.defineProperty，无法侦测新增/删除属性和索引赋值。
- 【关键点 2】Vue 2 通过重写数组方法侦测变更，索引赋值需使用 vm.$set。
- 【关键点 3】Vue 3 基于 Proxy，可以侦测更广泛的属性变化。
- 【关键点 4】watch 和 watchEffect 用于侦听特定数据源的变化。
- 【易错点 1】Vue 2 中直接通过索引修改数组不会触发更新，容易导致视图不刷新。
- 【易错点 2】Vue 2 中给对象动态添加属性不会响应式，需使用 Vue.set。
- 【易错点 3】深度监听（deep: true）会递归遍历对象，可能带来性能开销。