从剖析 Vue2 响应式原理，到解决对象或数组新增属性无响应问题
2023-11-22 23:24:36
前言：Vue2 是如何追踪数据变化形成响应的？
在 Vue2 中，响应式系统是实现数据驱动视图的关键。它通过追踪数据变化，并在数据变化时自动更新视图，从而实现数据的双向绑定。
那么，Vue2 是如何追踪数据变化形成响应的呢？
Vue2 使用了一种叫做「数据劫持」的技术。当 Vue2 实例被创建时，它会遍历 data 对象中的所有属性，并使用 Object.defineProperty() 方法对每个属性进行劫持。
Object.defineProperty() 方法可以拦截对属性的访问和修改操作，并触发相应的回调函数。当属性被访问时，Vue2 会收集依赖，并将该属性添加到依赖列表中。当属性被修改时，Vue2 会触发依赖列表中的所有回调函数，从而更新视图。
Vue2 响应式的注意点
在使用 Vue2 的过程中，需要注意以下几点：
- 只有在 data 对象中的属性才是响应式的，其他地方的属性不会被追踪。
- 对于对象类型的属性，只有对象的属性被修改时才会触发响应。如果只是修改了对象的某个属性，则不会触发响应。
- 对于数组类型的属性，只有数组的长度发生变化时才会触发响应。如果只是修改了数组中的某个元素，则不会触发响应。
解决方案：对象或数组新增属性无响应
在某些情况下，我们可能需要在对象或数组中新增一个属性，但发现这个新增的属性并没有触发响应。这是因为 Vue2 只能追踪现有属性的变化，而新增属性是 Vue2 不知道的，所以不会触发响应。
针对这种情况，我们可以使用以下三种解决方案：
对象方案
- 方案一：初始时设定
在对象初始化时，就将需要新增的属性一并定义好，这样 Vue2 就能追踪到这些属性的变化。
例如：
const obj = {
name: 'John',
age: 30,
// 新增属性
address: '123 Main Street'
}
- 方案二：调用 Vue.set() 方法
Vue 提供了一个名为 Vue.set() 的方法，可以手动设置对象的属性，并触发响应。
例如：
const obj = {
name: 'John',
age: 30
}
// 新增属性
Vue.set(obj, 'address', '123 Main Street')
- 方案三：创建一个新的对象，替换原对象
我们可以创建一个新的对象，将原对象的属性拷贝到新对象中，并新增需要的属性。然后，使用 Vue.set() 方法将新对象设置为 data 对象的属性。
例如：
const obj = {
name: 'John',
age: 30
}
// 创建一个新的对象
const newObj = Object.assign({}, obj, {
// 新增属性
address: '123 Main Street'
})
// 使用 Vue.set() 方法将新对象设置为 data 对象的属性
Vue.set(obj, 'obj', newObj)
数组方案
- 方案一：切割替换原数组
我们可以使用 Array.prototype.splice() 方法切割替换原数组，这样 Vue2 就能追踪到数组的变化。
例如：
const arr = [1, 2, 3]
// 新增属性
arr.splice(3, 0, 4)
- 方案二：Vue.set() 方法
Vue 也提供了一个名为 Vue.set() 的方法，可以手动设置数组的元素，并触发响应。
例如：
const arr = [1, 2, 3]
// 新增属性
Vue.set(arr, 3, 4)
结语
通过剖析 Vue2 响应式原理，并提供针对对象或数组新增属性无响应问题的解决方案，我们能够更好地理解和使用 Vue2 的响应式系统，从而编写出更加健壮和高效的 Vue2 应用。
