1、监测对象

下面是监测对象示例：

<template>
  <div id="root">
    <p>名字：{{ user.name }}</p>
    <p>年龄：{{ user.age }}</p>
    <button @click="changeName" style="margin-right: 10px;">修改名字</button>
    <button @click="changeObject">修改整个人</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: '张三',
        age: 30
      }
    };
  },
  methods: {
    changeName() {
      this.user.name = '李四';
    },
    changeObject() {
      this.$set(this.user, 'name', '王五');
      this.$set(this.user, 'age',40);
    }
  }
};
</script>
<style scoped>
#root {
  margin-left: 50px;
  width: 100%;
  height: 100%;
}
</style>

结果展示：

总结：

• 当点击 "修改名字" 按钮时，changeName 方法会修改 user 对象的 name 属性。由于 Vue 已经劫持了 user 对象的属性，并将其转换为 getter/setter，所以当 name 属性被修改时，相关的视图会自动更新。
• 当点击 "修改整个人" 按钮时，使用 this.$set 方法来修改每个属性。这种方法接受三个参数：要修改的对象、要修改的属性名、以及新的属性值。