【vuejs】vm.$set() 的原理解析和方法以及应用场景

1. Vue 响应式原理概述

Vue.js 是一个用于构建用户界面的渐进式框架，其核心特性之一是响应式系统。Vue 的响应式系统允许开发者声明性地描述一个应用的状态，而 Vue 会自动追踪状态的变化，并更新 DOM 以反映这些变化。

1.1 响应式数据的创建

Vue 使用 Object.defineProperty 来劫持数据对象的属性，为每个属性创建 getter 和 setter。当属性被访问或修改时，Vue 可以捕获这一行为，并触发视图的更新。

1.2 响应式系统的局限性

尽管 Vue 的响应式系统非常强大，但它也有局限性。Vue 不能检测到对象属性的添加或删除。这意味着如果在 Vue 实例创建后向其 data 对象添加新的属性，这些新属性不会触发视图的更新。

1.3 Vue.set() 和 vm.$set() 的作用

为了解决上述问题，Vue 提供了 Vue.set 和实例方法 vm.$set。这些方法允许开发者向响应式对象添加新的属性，并确保这些属性同样是响应式的，能够触发视图更新。使用 Vue.set 或 vm.$set 时，Vue 会智能地处理属性的添加，确保新属性同样具备响应性。

2. vm.$set() 方法介绍

2.1 vm.$set() 方法概述

vm.$set 是 Vue 实例的一个方法，它提供了一种在 Vue 实例的响应式对象上动态添加新属性的方式。当使用 vm.$set 向响应式对象添加新属性时，Vue 会确保这个新属性同样是响应式的，并且能够触发视图的更新。

2.2 vm.$set() 方法的使用场景

vm.$set 主要用于以下场景：

在 Vue 实例的 data 对象中动态添加属性。
当需要向深层嵌套的对象添加响应式属性时。

2.3 vm.$set() 方法的实现原理

vm.$set 的实现原理主要基于 Vue 的响应式系统。当调用 vm.$set 方法时，Vue 会执行以下步骤：

检查目标对象是否是响应式的，如果不是，则直接添加属性。
如果目标对象是响应式的，Vue 会通过内部的 defineReactive 方法来确保新属性也是响应式的。
更新依赖收集器，通知订阅者视图需要更新。

2.4 vm.$set() 方法与直接赋值的比较

直接赋值给响应式对象的新属性，Vue 无法检测到这一变化，因此不会触发视图更新。而使用 vm.$set 方法添加的新属性，Vue 能够检测到并触发视图更新，确保应用的响应性。

2.5 vm.$set() 方法的示例代码

var vm = new Vue({data: {userProfile: {name: 'John Doe',age: 30}}
})// 使用 vm.$set 向 userProfile 对象添加新的响应式属性
vm.$set(vm.userProfile, 'email', 'john@example.com')

在这个示例中，email 属性是通过 vm.$set 方法添加到 userProfile 对象的，因此它是一个响应式属性，任何对 email 的修改都会触发视图的更新。

3. vm.$set() 应用场景

3.1 动态表单处理

在动态表单的场景中，用户可能会根据某些条件添加或删除表单项。使用 vm.$set 可以确保这些动态添加的表单项能够被 Vue 响应式系统所跟踪，从而实现视图的自动更新。

3.2 响应式数组的索引更新

当需要对数组的某个索引进行响应式更新时，使用 vm.$set 可以确保数组的这一特定索引能够触发视图的更新，即使这个索引之前并不存在。

3.3 深层嵌套对象的属性添加

对于深层嵌套的对象，直接添加属性可能不会触发视图更新。通过使用 vm.$set，可以确保即使是深层嵌套的对象，新添加的属性也能够被 Vue 响应式系统所跟踪。

3.4 组件间数据传递

在 Vue 组件之间传递数据时，如果需要向接收组件的 data 对象中添加新的响应式属性，使用 vm.$set 可以确保这些属性能够在接收组件中触发视图更新。

3.5 从服务器获取的数据整合

当从服务器获取的数据需要整合到现有的响应式对象中时，使用 vm.$set 可以确保新整合的数据能够触发视图的更新，保持用户界面与数据的同步。

3.6 条件渲染时的数据响应

在条件渲染的场景下，如使用 v-if 或 v-for，可能会动态地向 data 对象中添加或删除属性。使用 vm.$set 可以确保这些动态变化能够被 Vue 响应式系统所捕获，并更新视图。

3.7 避免直接修改数组索引

在处理数组时，直接通过索引赋值可能会绕过 Vue 的响应式系统。使用 vm.$set 可以确保数组的响应性，即使是直接通过索引进行的修改也能够触发视图更新。

3.8 响应式属性的批量添加

当需要批量添加多个响应式属性到对象时，vm.$set 可以与 Object.assign 结合使用，确保所有新添加的属性都是响应式的，并触发视图更新。

3.9 跨组件状态管理

在使用 Vuex 或其他状态管理库时，跨组件的状态更新可能需要确保响应性。vm.$set 可以用于更新 Vuex 的 state 对象，确保跨组件的数据更新能够触发视图的响应式更新。

4. 实现原理分析

4.1 Vue 的响应式系统基础

Vue 的响应式系统是通过 Object.defineProperty 实现的，它能够劫持属性的 getter 和 setter，从而在属性被访问或修改时触发视图更新。然而，Vue 无法检测到对象属性的添加或删除。

4.2 vm.$set() 方法的实现机制

vm.$set 方法是 Vue 提供的一个工具函数，用于在响应式对象上动态添加属性。其实现机制如下：

首先检查目标对象是否是响应式的，如果是，Vue 会通过 defineReactive 方法确保新属性也是响应式的。
如果目标对象不是响应式的，Vue 会直接添加属性。
无论哪种情况，vm.$set 都会更新依赖收集器，通知订阅者进行视图更新。

4.3 defineReactive 方法的作用

defineReactive 是 Vue 内部用于创建响应式属性的方法。它使用 Object.defineProperty 为属性添加 getter 和 setter，确保属性的变化能够被 Vue 捕获。

4.4 vm.$set() 与数组响应性

当 vm.$set 应用于数组时，Vue 会使用数组的 splice 方法来触发响应性。splice 是一个变异数组的方法，Vue 通过重写这些方法来确保数组的响应性。

4.5 vm.$set() 与 Vue 3 的响应式系统

在 Vue 3 中，响应式系统得到了重写，使用了 Proxy 代替了 Vue 2 中的 Object.defineProperty。这使得 Vue 3 能够更有效地处理响应性，包括对对象属性的添加和删除。

4.6 vm.$set() 方法的源码分析

Vue 的源码中，vm.$set 方法的实现如下：

export function set (target: Array<any> | Object, key: any, val: any): any {if (Array.isArray(target) && isValidArrayIndex(key)) {target.length = Math.max(target.length, key)target.splice(key, 1, val)} else if (key in target && !('__ob__' in target)) {target[key] = val} else {const ob = (target: any).__ob__if (!ob) {target[key] = val} else {defineReactive(ob.value, key, val)ob.dep.notify()}}return val
}