vue修改对象的属性值后页面不重新渲染的实例

Vue.js是一个响应式框架，它支持组件化开发，当数据发生改变时，页面会自动更新。但是，在使用Vue.js时有一个问题：当修改对象的属性值后，页面不会重新渲染。这是因为Vue.js检测数据的变化是基于对象的setter方法，而不是对于对象的属性的getter/setter的监听，导致Vue.js无法发现对象属性的修改。因此，我们需要特殊的处理来让Vue.js能够检测到对象属性的变化。

实现这个功能的核心思想是使用Vue.set方法或者this.$forceUpdate()方法来通知Vue.js，告诉它对象的属性值发生了变化。

下面，我将提供两个示例来说明如何解决这个问题：

示例一

假设有一个对象：

data() {
  return {
    person: {
      name: 'Tom',
      age: 18
    }
  }
}

我们想要修改person对象的name属性，从Tom修改为Jerry，代码如下：

this.person.name = 'Jerry';

然而，Vue.js并不会自动更新页面，因为Vue.js无法检测到对象属性的变化。为了解决这个问题，我们可以使用Vue.set方法来更新属性：

Vue.set(this.person, 'name', 'Jerry');

这样，当我们使用Vue.set方法更新属性时，Vue.js就会自动更新页面。

示例二

假设我们有一个组件，在mounted钩子函数中，我们对组件的一个对象进行了修改，如下所示：

mounted() {
  this.item.price = 200;
}

这里的item是一个对象，它的属性价格被修改了。但是，我们发现页面并没有自动更新，这是因为Vue.js无法检测到属性值的变化。为了解决这个问题，我们可以使用this.$forceUpdate()方法来强制组件重新渲染，代码如下：

mounted() {
  this.item.price = 200;
  this.$forceUpdate();
}

这样，当我们使用this.$forceUpdate()方法强制渲染时，Vue.js就会重新渲染组件。

综上所述，无论是使用Vue.set方法还是this.$forceUpdate()方法，我们都可以很方便地解决对象属性值修改后页面不重新渲染的问题。