Vue源码解析：Vue.set()与$set()的实战与实现原理

Vue源码中的Vue.set()和this.$set()方法是Vue.js库为了处理复杂数据绑定和响应式特性的重要工具。当我们在Vue应用中操作数组或对象时，有时会遇到不触发视图更新的情况，尤其是在直接修改原始数组或对象的索引或属性时。这源于Vue默认只能检测通过getter访问的属性变化，而非直接对原生数据结构的操作。 Vue.set()和this.$set()的主要应用场景是在需要确保新添加或修改的属性能够被Vue检测到并触发视图更新的场景。它们通常在以下情况下使用： 1. 当动态添加数组元素，如`Vue.set(vueInstance.$data.arr, index, value)`，这样可以迫使Vue监听新添加的元素，使页面重新渲染。 2. 当动态添加对象属性，如`Vue.set(vueInstance.$data.obj1, key, value)`，这有助于确保对象的响应性，即使该属性原本未在数据对象中定义。 在源码层面，Vue.set()和this.$set()的实现基于Vue的观察者模式，它们都依赖于`observer/index.js`中的`set`函数。`set`函数的核心作用是通知Vue的依赖收集器（Dep）一个新的响应式属性已经被创建或更新，从而触发虚拟DOM的重新计算和DOM的更新。 具体实现过程如下： - 在`observer/index.js`模块中，`set`函数接收三个参数：目标对象、属性名和新的值。它首先检查目标对象是否已经被Vue的`Observer`实例化，如果没有，它会将其转换为一个受观察的对象，以便后续的响应式追踪。 - 接着，`set`函数会创建一个新的`Watcher`实例，这是一个轻量级的代理对象，负责监听目标属性的变化。当属性的值发生变化时，`Watcher`会通知所有依赖它的组件进行视图更新。 - 最后，`set`函数会设置目标对象的指定属性值，并将新创建的`Watcher`添加到`Dep`实例的跟踪列表中，确保当依赖变化时，相应的组件会进行重渲染。 总结来说，Vue.set()和this.$set()方法提供了在非响应式对象中添加新属性并保持其响应性的功能，通过调用这些API，开发者可以确保在更改数组或对象时，Vue能够正确地感知并更新视图，从而维持应用程序的状态管理和数据驱动的特性。