【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 能够检测到并触发视图更新，确保应用的响应性。

原文链接：https://blog.csdn.net/weixin_45046532/article/details/139527932