VUE 实现动态给对象增加属性，并触发视图更新操作示例

VUE 实现动态给对象增加属性，并触发视图更新操作可以通过以下两个示例进行说明。

示例一

<template>
  <div>
    <button @click="addAttr">添加属性</button>
    <span>添加属性之前：</span><span>{{ obj }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {}
    }
  },
  methods: {
    addAttr() {
      // 方法一：Vue.$set()
      this.$set(this.obj, 'name', 'Lucy')

      // 方法二：Vue.set()
      // Vue.set(this.obj, 'name', 'Lucy')
    }
  }
}
</script>

上述示例中，浏览器中初始呈现的页面中没有任何内容。但是，当用户点击“添加属性”按钮时，就会动态给 obj 对象增加一个 name 属性，并以“Lucy”作为属性值。为了实现该功能，可以使用 Vue.$set() 或 Vue.set() 方法，它们均可以实现给对象动态增加属性的操作，并且以响应式对象的方式维护数据。因此，当 obj 对象中添加了新的属性之后，视图也会相应地更新。

值得注意的是，使用 Vue.$set() 或 Vue.set() 方法添加的属性是响应式的，才能被 Vue 监听到并及时更新视图。

示例二

<template>
  <div>
    <button @click="addAttr">添加属性</button>
    <span>添加属性之前：</span><span>{{ obj }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {}
    }
  },
  methods: {
    addAttr() {
      // 方法三：this.$set()
      this.$set(this.obj, 'name', 'Lucy')

      // 等效于
      // this.obj['name'] = 'Lucy'
      // this.$forceUpdate()
    }
  }
}
</script>

上述示例中，当用户点击“添加属性”按钮时，会动态给 obj 对象增加一个 name 属性，并以“Lucy”作为属性值。但是，在这个示例中，使用的方法是 this.$set()，而并非 Vue.$set() 或 Vue.set()。之所以可以使用 this.$set() 方法，是因为该方法在组件中是全局可访问的，等效于使用 Vue.set() 或 Vue.$set() 方法。此外，示例中演示了另一种方案：手动给对象添加属性，并通过 this.$forceUpdate() 方法强制更新视图。当对象的属性是非响应式的时，这种方法可能是更好的选择。但是，需要注意的是，如果频繁地调用 this.$forceUpdate() 方法会导致性能下降，不建议这样使用。

以上两个示例说明了实现动态给对象增加属性，并触发视图更新操作的两种常用方式，可以根据实际需要选择合适的方法进行操作。