[Vue] Vue2中vm.$set的实现原理

面试问题：Vue2中vm.$set的实现原理

建议回答：

vm.$set是Vue2中一个用于响应式更新数据的方法，它允许你向响应式对象添加一个新的属性，并确保这个新属性同样是响应式的，同时触发视图更新。vm.$set方法接受三个参数：对象、键（key）和值（value）。它的实现原理基于Vue的响应式系统，具体来说，是通过Object.defineProperty来实现的。

1. 响应式更新：

• • 当你使用vm.$set给对象添加新属性时，Vue会确保这个属性是响应式的，即Vue会为这个属性创建getter和setter，以便在属性值变化时触发视图更新。

2. 触发视图更新：

• • vm.$set方法不仅更新数据，还会通知Vue的响应式系统，使得依赖于这个属性的视图部分能够重新渲染。

3. 避免直接赋值：

• • 直接通过索引赋值（如vm.array[index] = newValue）不会触发视图更新，因为Vue无法检测到这种类型的改变。vm.$set提供了一种方式来绕过这个限制。

技术详解：

1. Object.defineProperty的使用：

• • Vue2使用Object.defineProperty来劫持对象属性的getter和setter，从而实现响应式系统。对于新添加的属性，Vue会动态地为这个属性添加getter和setter。

2. 依赖收集：

• • 当属性被读取时，getter会触发依赖收集，将依赖于这个属性的Watcher添加到依赖列表中。

3. 派发更新：

• • 当属性被修改时，setter会触发派发更新，通知所有依赖于这个属性的Watcher进行更新。

4. 数组的特殊情况：

• • 对于数组，Vue2无法检测到通过索引直接设置的值的变化。vm.$set通过创建一个新数组并触发视图更新来解决这个问题。

参考链接：

• Vue.js官方文档 - vm.$set 方法
• Vue.js响应式原理解析
• Vue.js 2.0 响应式系统解析

总结

vm.$set是Vue2中一个重要的方法，它允许开发者向响应式对象添加新的属性，并确保这些属性是响应式的，同时触发视图的更新。它的实现依赖于Vue的响应式系统，通过Object.defineProperty来劫持属性的getter和setter，实现依赖收集和派发更新。理解vm.$set的实现原理有助于更好地使用Vue的响应式特性。