在Vue的世界里，数据响应式是一个非常核心的概念。但有时候，我们可能需要在已有的data对象中添加新的属性，这时候就可能会遇到一些意想不到的情况。今天，就让我们来深入探讨一下，在Vue中给data对象新增属性时，究竟会发生什么，以及如何巧妙地解决这个问题。

一、新增属性不等于新增响应式属性

首先，我们来看一个常见的场景：假设我们有一个data对象obj，其中包含一个属性a。现在，我们想要给这个对象新增一个属性b。如果我们直接使用this.obj.b = 'obj.b';这样的方式，那么这个新属性b将不再是响应式的，也就是说，当我们修改b的值时，Vue将无法检测到这个变化，从而不会触发视图的更新。

二、Vue的全局API$set来解决响应式问题

为了解决这个问题，Vue提供了一个全局API——$set。这个API可以帮助我们手动将一个新属性设置为响应式的。具体来说，我们可以使用this.$set(this.obj, 'b', 'obj.b');这样的语句来实现。这样，当我们修改b的值时，Vue就能够检测到这个变化，并触发视图的更新。

三、代码示例与解释

下面是一个具体的代码示例，展示了如何在Vue中使用$set来添加响应式属性：

<template>
  <div>
    <ul>
      <li v-for="(value, key) in obj" :key="key">{{ value }}</li>
    </ul>
    <button @click="addObjB">添加 obj.b</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: { a: 'obj.a' }
    };
  },
  methods: {
    addObjB() {
      // 直接添加新属性，视图不会更新
      // this.obj.b = 'obj.b';

      // 使用 $set 添加新属性，视图会更新
      this.$set(this.obj, 'b', 'obj.b');
      console.log(this.obj);
    }
  }
};
</script>

在这个示例中，我们可以看到，当我们点击按钮时，addObjB方法会被调用。如果我们直接使用this.obj.b = 'obj.b';这样的方式添加新属性，那么视图是不会更新的。但是，如果我们使用this.$set(this.obj, 'b', 'obj.b');这样的语句，那么视图就会随之更新。

四、记忆技巧

为了帮助大家更好地记住这个知识点，我们可以总结出这样一个记忆技巧：直接添加属性时，视图不更新；使用$set时，视图会更新。

总之，在Vue中给data对象新增属性时，我们需要特别注意这个新属性是否是响应式的。如果需要使其成为响应式的，我们可以使用Vue提供的$set方法来实现。