在 Vue 中，动态地向 data 中添加新的属性是一个常见的需求，但它也可能引发一些问题，尤其是关于 响应式更新 和 数据绑定 的问题。Vue 的响应式系统通过 getter 和 setter 来追踪和更新数据，但 动态添加新属性 时，Vue 并不会自动为这些新属性创建响应式链接。
1. 直接向 Vue 实例的 data 添加新属性时会发生什么？
1.1 问题描述：
假设我们有一个 Vue 实例：
javascript">new Vue({el: '#app',data: {name: 'Vue'}
});
然后，假设你在组件实例外部或某个方法中，尝试动态添加一个新的属性：
javascript">vm.age = 25; // 动态添加属性
此时，age 属性将会被成功地添加到 data 中，但 Vue 的响应式系统并不会自动将这个新的属性变为响应式的。这意味着：
- Vue 不会 追踪
age的变化，因此如果你修改age的值，视图不会更新。 - 对
age的访问也不会触发视图重新渲染。
1.2 原理分析：
Vue 的响应式系统是基于 Object.defineProperty 或 Vue 3 的 Proxy 实现的。当 Vue 初始化时，它会在 data 中的每个已有属性上安装 getter 和 setter，来实现响应式追踪。这意味着 Vue 会监听对这些属性的读取和写入操作，自动更新视图。
然而，动态添加属性 的时候，Vue 不会在新的属性上添加响应式功能，因为 Vue 在实例化时才会对 data 中的属性进行代理。如果在实例化后才添加新属性，Vue 无法自动检测并绑定新属性的响应式行为。
2. 如何解决动态添加新属性的问题？
为了使动态添加的属性也能变成响应式的，Vue 提供了以下两种方法：
2.1 使用 Vue.set() 方法
Vue 提供了 Vue.set() 或 this.$set() 方法来确保新
