前言
Vue.js 是一款流行的 JavaScript 库，它提供了一个简单易用的框架，为用户提供了一个高效的数据绑定和组件化编程的方法。然而，当我们使用 Vue.js 开发过程中，我们可能会遇到一些问题。其中一个常见的问题是，当组件的数据对象变化时，组件并没有重新渲染，导致界面没有发生变化。在这篇文章中，我们将探讨这个问题的原因，以及如何解决这个问题。
主体
Vue.js 的核心思想是数据驱动视图。当数据对象发生变化时，视图会自动更新。这是通过 Vue.js 的响应式系统实现的。Vue.js 会在组件定义时，将所有数据对象添加到一个响应式系统中。当数据对象的属性发生变化时，响应式系统会自动检测到变化，并且通知视图进行更新。
然而，有时候我们会遇到这样的问题，当数据对象的属性发生变化时，视图并没有重新渲染。这种情况下，我们需要仔细分析问题的原因，并找到解决方法。
立即学习“前端免费学习笔记（深入）”；
首先，我们需要明确的是，当我们修改一个对象的属性时，Vue.js 只会检测该对象的直接属性。当我们给该对象添加一个新属性时，Vue.js 并不会检测到该属性的变化。这是因为新添加的属性并没有被添加到响应式系统中。
例如，下面的代码中，我们给一个对象添加了一个新属性 newProp：
const vm = new Vue({
data: {
obj: {
prop1: 'value1',
prop2: 'value2'
}
}
})
vm.obj.newProp = 'new value'由于 newProp 并没有被添加到响应式系统中，当我们修改 newProp 的值时，视图并不会重新渲染。
为了解决这个问题，我们可以使用 Vue.js 提供的 $set 方法，将新属性添加到响应式系统中：
vm.$set(vm.obj, 'newProp', 'new value')
这样，当我们修改 newProp 的值时，视图会自动重新渲染。
除了新属性不会被检测到外，当我们直接修改数组中的元素时，也会出现类似的问题。例如，下面的代码中，我们直接修改了数组 arr 中的元素：
const vm = new Vue({
data: {
arr: ['elem1', 'elem2', 'elem3']
}
})
vm.arr[1] = 'new elem2'由于 Vue.js 并不会检测数组中元素的变化，视图并不会重新渲染。
为了解决这个问题，我们可以使用 Vue.js 提供的 $set 方法，将修改后的元素替换原来的元素：
vm.$set(vm.arr, 1, 'new elem2')
这样，当我们修改数组中的元素时，视图也会自动重新渲染。
另外，我们还需要注意的是，在某些情况下，我们可能需要手动强制更新视图。例如，当我们使用计算属性或者侦听器时，当计算属性或侦听器中的值发生变化时，视图不会自动更新。我们需要使用 $forceUpdate 方法来强制更新视图：
const vm = new Vue({
data: {
value: 1
},
computed: {
computedValue () {
return this.value + 1
}
},
methods: {
update () {
this.value++
this.$forceUpdate()
}
}
})总结
在 Vue.js 开发过程中，当我们遇到组件数据对象变化时，组件没有重新渲染的问题时，我们需要考虑以下几点：
- 新属性和数组元素会被 Vue.js 的响应式系统忽略，我们需要使用
$set方法将它们添加到响应式系统中； - 当我们使用计算属性或侦听器时，当计算属性或侦听器中的值发生变化时，视图不会自动更新，我们需要使用
$forceUpdate方法强制更新视图。
以上方法可以帮助我们解决组件数据对象变化时不渲染的问题。但我们仍需要遵循 Vue.js 的响应式系统的原则，充分利用它带来的便利。如果遇到问题，要仔细分析其原因，并找到解决方法，而不是直接规避问题。
