vue中 $set的原理

在 Vue.js 中，$set 是用于在响应式对象中添加一个新属性的方法。它的原理是通过调用 Vue.js 内部的依赖追踪系统，通知该对象的监听器去监听新属性的变化。

具体来说，当执行 $set 方法时，Vue.js 会检测该对象是否已经被劫持为响应式对象，如果没有，则将其转换为响应式对象，并为其添加新属性；如果已经是响应式对象，则直接为其添加新属性。然后，Vue.js 会向该对象的监听器发送变化通知，以便更新视图。

下面是一个示例代码，演示了如何使用 $set 方法向一个对象添加新属性：

创建一个响应式对象
const vm = new Vue({
  data: {
    user: {
      name: 'Alice'
    }
  }
})

添加一个新属性
vm.$set(vm.user, 'age', 25)

在上面的代码中

set 方法被调用来向 user 对象添加一个新属性 age 并自动触发视图更新 而不能用于修改已有的属性 若要修改已有的属性 可以直接对属性进行修改操作 这样也会自动触发视图更新