Vue 的响应式系统会自动跟踪大多数数据的变化，但有些情况下，视图更新可能无法自动发生。常见的原因包括：
- 修改对象时，新增的属性没有通过
Vue.set()或this.$set()添加。 - 修改数组时，直接通过索引赋值不会触发视图更新。
- 修改深层嵌套的数据时，需要确保嵌套属性是响应式的。
本文分享修改深层嵌套的数据，视图没有更新应该如何解决。在 Vue 2 中，当 data 中的数据层级较深（嵌套对象的属性比较多）时，修改深层嵌套的数据可能导致视图不更新。这是因为 Vue 2 的响应式系统基于 Object.defineProperty，只会对初始时已经存在的属性进行响应式处理。如果在数据对象创建之后动态修改了深层次的属性，Vue 可能无法检测到这个变化，从而不更新视图。
解决方案
为了确保深层嵌套的属性修改能够触发视图更新，可以使用以下几种方法：
1. 使用 Vue.set 或 this.$set
Vue.set 和 this.$set 是 Vue 提供的专门方法，用来确保新添加的或修改的属性是响应式的。对于深层嵌套的属性，可以使用 Vue.set 或 this.$set 来更新属性，以确保它们触发视图更新。
示例： 假设我们有如下数据结构：
data() {
return {
user: {
profile: {
name: 'Alice',
address: {
street: '123 Main St',
city: 'Somewhere'
}
}
}
}
}
如果我们修改 address 中的 street 属性，直接通过 this.user.profile.address.street = '456 Elm St' 可能不会触发视图更新。为了确保视图更新，我们可以使用 Vue.set 或 this.$set。
使用 Vue.set：
// 修改深层嵌套的属性
Vue.set(this.user.profile.address, 'street', '456 Elm St');
使用 this.$set：
// 修改深层嵌套的属性
this.$set(this.user.profile.address, 'street', '456 Elm St');
通过 Vue.set 或 this.$set，Vue 会确保新修改的属性变得响应式，从而能够触发视图更新。
2. 直接替换整个对象
如果修改的是一个对象，而这个对象嵌套比较深，另一个简单的方法是直接替换整个对象，可以通过重新赋值整个嵌套对象来实现，这样 Vue 会重新绑定新的对象并更新视图。
示例：
// 替换整个嵌套对象
this.user.profile.address = {
street: '456 Elm St',
city: 'Elsewhere'
};
通过这种方式，Vue 会检测到 address 对象的变化，视图会被更新。
3. 使用 Object.assign() 或展开操作符 ... 替换属性
如果你只想修改嵌套对象中的部分属性，可以使用 Object.assign() 或展开运算符 (...)来替换部分对象，而不是直接修改对象中的某个属性，这样 Vue 会识别到对象的变化。
示例：
// 使用 Object.assign() 或展开操作符更新嵌套对象
this.user.profile.address = Object.assign({}, this.user.profile.address, { street: '456 Elm St' });
// 或者
this.user.profile.address = { ...this.user.profile.address, street: '456 Elm St' };
这样 Vue 会通过替换整个 address 对象来触发视图更新。
4. 使用计算属性（适用于依赖深层数据的场景）
如果你需要基于深层次的数据进行计算并渲染，计算属性是一个非常方便的解决方案。计算属性会根据其依赖的响应式数据进行自动更新，从而避免手动操作深层嵌套的数据。
示例：
computed: {
addressText() {
return `${this.user.profile.address.street}, ${this.user.profile.address.city}`;
}
}
计算属性会自动依赖 user.profile.address 中的属性，任何属性变化都会触发计算属性的更新，从而更新视图。
5. 深层次响应式对象（不常用）
在 Vue 2 中，通常不需要自己实现深度响应式，因为 Vue 已经提供了 Vue.set 或 this.$set 等方法来解决嵌套数据的问题。但是如果需要，你也可以使用 Vue.observable() 来创建深度响应式的对象，或者手动递归使对象的每个层级都变得响应式。这种方法在实际开发中比较少用，因为 Vue 提供了更简单的方法。
6. 使用 Vue 3 的 reactive() 函数
如果你使用的是 Vue 3，可以利用 reactive() 函数来创建深层响应式对象：
import { reactive } from 'vue'
const state = reactive({
nested: {
deep: {
property: 'value'
}
}
})
javascript复制代码
7. 强制更新组件
在极少数情况下，你可能需要强制更新整个组件：
this.$forceUpdate()
8. 总结
Vue 2.x：
Vue.set或this.$set是修改深层嵌套数据时最常用的解决方案，确保新的属性是响应式的。- 直接替换整个对象 是另一种有效的解决方式，尤其适用于嵌套对象需要完全替换的场景。
- 计算属性 可以简化深层数据的渲染和更新，避免手动更新数据。
Object.assign()或 展开操作符...可以用来替换对象中的部分属性，并确保视图更新。
Vue 3.x：
使用 reactive API 来将整个对象（包括嵌套对象）变成响应式，从而避免需要手动使用 Vue.set()。
