面试题：Vue 中给 data 的对象添加新属性时会发生什么？如何解决？

在 Vue 中，直接给 data 中的对象添加新属性时，新属性不会是响应式的。这是因为 Vue 在初始化时会对 data 中的属性进行递归的响应式处理，但后续动态添加的属性不会被自动转换为响应式。

1. 问题描述

（1）直接添加新属性的问题

当你直接给 data 中的对象添加新属性时，Vue 无法检测到这个变化，因此不会触发视图更新。


   export default {
     data() {
       return {
         user: {
           name: 'Alice',
         },
       };
     },
     methods: {
       addAge() {
         this.user.age = 25; // 直接添加新属性，不会触发视图更新
       },
     },
   };
   export default {
     data() {
       return {
         user: {
           name: 'Alice',
         },
       };
     },
     methods: {
       addAge() {
         this.user.age = 25; // 直接添加新属性，不会触发视图更新
       },
     },
   };
   export default {
     data() {
       return {
         user: {
           name: 'Alice',
         },
       };
     },
     methods: {
       addAge() {
         this.user.age = 25; // 直接添加新属性，不会触发视图更新
       },
     },
   };

（2）原因

Vue 使用 Object.defineProperty（Vue 2）或 Proxy（Vue 3）来实现响应式数据。
在初始化时，Vue 只会对 data 中已存在的属性进行响应式处理，后续动态添加的属性不会被自动处理。

2. 解决方法

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

Vue 2 提供了 Vue.set 方法，用于向响应式对象添加新属性并确保它是响应式的。


   export default {
     data() {
       return {
         user: {
           name: 'Alice',
         },
       };
     },
     methods: {
       addAge() {
         this.$set(this.user, 'age', 25); // 使用 Vue.set 添加新属性
       },
     },
   };
   export default {
     data() {
       return {
         user: {
           name: 'Alice',
         },
       };
     },
     methods: {
       addAge() {
         this.$set(this.user, 'age', 25); // 使用 Vue.set 添加新属性
       },
     },
   };
   export default {
     data() {
       return {
         user: {
           name: 'Alice',
         },
       };
     },
     methods: {
       addAge() {
         this.$set(this.user, 'age', 25); // 使用 Vue.set 添加新属性
       },
     },
   };

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

在组件实例中，可以使用 this.$set，它是 Vue.set 的别名。


   export default {
     data() {
       return {
         user: {
           name: 'Alice',
         },
       };
     },
     methods: {
       addAge() {
         this.$set(this.user, 'age', 25); // 使用 this.$set 添加新属性
       },
     },
   };
   export default {
     data() {
       return {
         user: {
           name: 'Alice',
         },
       };
     },
     methods: {
       addAge() {
         this.$set(this.user, 'age', 25); // 使用 this.$set 添加新属性
       },
     },
   };
   export default {
     data() {
       return {
         user: {
           name: 'Alice',
         },
       };
     },
     methods: {
       addAge() {
         this.$set(this.user, 'age', 25); // 使用 this.$set 添加新属性
       },
     },
   };

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

通过创建一个新对象并替换原对象，可以触发响应式更新。


   export default {
     data() {
       return {
         user: {
           name: 'Alice',
         },
       };
     },
     methods: {
       addAge() {
         this.user = Object.assign({}, this.user, { age: 25 }); // 替换原对象
       },
     },
   };
   export default {
     data() {
       return {
         user: {
           name: 'Alice',
         },
       };
     },
     methods: {
       addAge() {
         this.user = Object.assign({}, this.user, { age: 25 }); // 替换原对象
       },
     },
   };
   export default {
     data() {
       return {
         user: {
           name: 'Alice',
         },
       };
     },
     methods: {
       addAge() {
         this.user = Object.assign({}, this.user, { age: 25 }); // 替换原对象
       },
     },
   };

（4）使用 `Proxy`（Vue 3）

Vue 3 使用 Proxy 实现响应式数据，因此直接添加新属性是响应式的。


   export default {
     data() {
       return {
         user: {
           name: 'Alice',
         },
       };
     },
     methods: {
       addAge() {
         this.user.age = 25; // 在 Vue 3 中，直接添加新属性是响应式的
       },
     },
   };
   export default {
     data() {
       return {
         user: {
           name: 'Alice',
         },
       };
     },
     methods: {
       addAge() {
         this.user.age = 25; // 在 Vue 3 中，直接添加新属性是响应式的
       },
     },
   };
   export default {
     data() {
       return {
         user: {
           name: 'Alice',
         },
       };
     },
     methods: {
       addAge() {
         this.user.age = 25; // 在 Vue 3 中，直接添加新属性是响应式的
       },
     },
   };

（5）提前声明属性

如果可能，尽量在 data 中提前声明所有可能的属性，避免动态添加。


   export default {
     data() {
       return {
         user: {
           name: 'Alice',
           age: null, // 提前声明属性
         },
       };
     },
     methods: {
       addAge() {
         this.user.age = 25; // 直接赋值即可
       },
     },
   };
   export default {
     data() {
       return {
         user: {
           name: 'Alice',
           age: null, // 提前声明属性
         },
       };
     },
     methods: {
       addAge() {
         this.user.age = 25; // 直接赋值即可
       },
     },
   };
   export default {
     data() {
       return {
         user: {
           name: 'Alice',
           age: null, // 提前声明属性
         },
       };
     },
     methods: {
       addAge() {
         this.user.age = 25; // 直接赋值即可
       },
     },
   };