解决vue中对象属性改变视图不更新的问题

当我们在Vue组件中把一个对象作为一个属性传递给子组件，如果我们修改了对象中的属性的值，那么Vue默认是不会触发视图更新的，这是因为Vue在比较对象时是通过引用地址比较的，而不是对象内部属性的值比较。这就导致了当对象中属性值改变后，我们需要手动通知Vue去更新视图的问题。

下面是解决vue中对象属性改变视图不更新的步骤：

方案一：使用vm.$set()方法更新对象属性

在Vue实例中，当我们更新对象中的属性值时，我们可以使用Vue提供的$set()方法来通知Vue更新视图。下面是使用vm.$set()方法进行对象属性更新的示例：

<template>
  <div>
    <div>{{user.name}}</div>
    <button @click="changeUserName">修改用户名</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: 'Tom',
        age: 18
      }
    }
  },
  methods: {
    changeUserName() {
      this.$set(this.user, 'name', 'Jerry');
    }
  }
};
</script>

在上面的代码里，我们通过vm.$set(object, key, value)方法来更新对象中的属性值。在这个方法中，object表示要更新的对象，key表示要更新的对象属性，value表示要更新的属性值。

方案二：使用深拷贝更新对象

除了使用vm.$set()方法来更新对象属性，我们还可以使用深拷贝的方式来更新对象。这个方法的实现方式比较灵活，下面是深拷贝更新对象的示例：

<template>
  <div>
    <div>{{user.name}}</div>
    <button @click="changeUserName">修改用户名</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: 'Tom',
        age: 18
      }
    }
  },
  methods: {
    changeUserName() {
      const newUser = JSON.parse(JSON.stringify(this.user));
      newUser.name = 'Jerry';
      this.user = newUser;
    }
  }
};
</script>

在上面的代码中，我们把原对象this.user进行深拷贝，生成一个新对象newUser。之后，我们对newUser对象进行属性值修改，然后再次把新对象赋值给this.user，从而实现对对象属性的更新。

总结：

在Vue中，当我们使用对象作为组件属性时，因为默认不会触发视图更新，所以我们需要使用vm.$set()方法或者深拷贝的方式来进行对象属性值的修改。在实际开发中，我们可以根据需要选择合适的方式来解决视图不更新的问题。