面试题：为什么 Vue 中给对象添加新属性后界面不刷新？

在 Vue 中，直接给对象添加新属性时，界面不会自动刷新，这是因为 Vue 的响应式系统无法检测到对象属性的新增或删除。

Vue 的响应式系统是通过 Object.defineProperty（Vue 2）或 Proxy（Vue 3）来实现的，但它们只能监听已有属性的变化，无法监听新增或删除的属性。

一、为什么界面不刷新？

1. Vue 2 的响应式原理

Vue 2 使用 Object.defineProperty 将对象的属性转换为响应式。
Object.defineProperty 只能监听已有属性的变化，无法监听新增或删除的属性。

2. Vue 3 的响应式原理

Vue 3 使用 Proxy 实现响应式，Proxy 可以监听对象的新增和删除操作。
但即使使用 Proxy，在某些情况下（如直接赋值），Vue 3 也无法自动触发更新。

二、如何解决？

1. 使用 `Vue.set`（Vue 2）

Vue 2 提供了 Vue.set 方法，用于向响应式对象添加新属性并触发视图更新。
示例：

  this.$set(this.obj, 'newProp', 'value');

2. 使用 `this.$set`（Vue 2）

在组件内部，可以直接使用 this.$set，它是 Vue.set 的别名。
示例：

  this.$set(this.obj, 'newProp', 'value');

3. 使用 `Object.assign`（Vue 2 和 Vue 3）

通过 Object.assign 创建一个新对象，替换原有对象。
示例：

  this.obj = Object.assign({}, this.obj, { newProp: 'value' });

4. 使用 `Vue.set` 或 `this.$set`（Vue 3）

Vue 3 仍然支持 Vue.set 和 this.$set，但推荐使用 Proxy 的特性。
示例：

  import { set } from 'vue';
  set(this.obj, 'newProp', 'value');

5. 使用 `Proxy`（Vue 3）

Vue 3 的 Proxy 可以监听对象的新增和删除操作，但需要确保使用响应式 API（如 reactive 或 ref）。
示例：

  import { reactive } from 'vue';

  const obj = reactive({});
  obj.newProp = 'value'; // 自动触发更新

三、代码示例

1. Vue 2 示例

<template>
  <div>
    <p>{{ obj.newProp }}</p>
    <button @click="addProperty">添加属性</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {}
    };
  },
  methods: {
    addProperty() {
      // 使用 Vue.set 添加新属性
      this.$set(this.obj, 'newProp', 'Hello Vue!');
    }
  }
};
</script>

2. Vue 3 示例

<template>
  <div>
    <p>{{ obj.newProp }}</p>
    <button @click="addProperty">添加属性</button>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const obj = reactive({});

    const addProperty = () => {
      // 直接添加新属性
      obj.newProp = 'Hello Vue!';
    };

    return {
      obj,
      addProperty
    };
  }
};
</script>

四、总结

方法	Vue 2 支持	Vue 3 支持	说明
`Vue.set`	✔️	✔️	显式添加新属性并触发更新
`this.$set`	✔️	✔️	组件内部使用，`Vue.set` 的别名
`Object.assign`	✔️	✔️	创建新对象替换原有对象
`Proxy`	❌	✔️	Vue 3 的响应式 API，自动监听新增属性