在 Vue.js 中，对象的属性是响应式的。这意味着当对象的属性值发生改变时，视图会自动更新以反映这种变化。但当对象的属性被添加时，这种自动更新的功能就会失效。这篇文章将会介绍 Vue.js 提供的 $set 方法，以便在对象的属性被添加时，实现响应式的更新。此外，本文还将介绍什么是响应式属性，以及为什么使用它们是一个好习惯。
什么是响应式属性？
在 Vue.js 中，响应式属性是指一个属性被绑定到一个 Vue 实例的数据对象上，并且该属性的值可以被改变，同时该改变会自动反映到视图上。当响应式属性被改变时，该 Vue 实例会自动更新相应的视图。这种功能的实现是通过使用 Vue.js 的依赖追踪系统来实现的，该系统会跟踪所有依赖于响应式属性的相关代码，并且当属性值改变时，自动更新这些相关代码。
为什么使用响应式属性？
使用响应式属性的好处是很明显的。首先，它使得我们的代码更加简洁和易于理解。毫无疑问，当我们在处理复杂的数据结构时，这种简洁和易于理解的代码对于我们的开发效率有很大的帮助。其次，响应式属性的值的改变会自动反映到视图上，这意味着我们可以充分利用 Vue.js 的依赖追踪系统，避免手动处理 DOM 操作带来的繁琐性。
使用 $set 方法添加响应式属性
Vue.js 提供的 $set 方法是用来解决向对象中添加新属性的问题。在不使用 $set 方法的情况下，添加新属性将不能够被自动追踪，导致该属性无法实现响应式的更新。因此，我们必须使用 $set 方法来实现响应式属性的添加。
$set 方法的基本语法如下：
Vue.set(object, propertyName, value)
其中：
- object：表示我们要添加响应式属性的对象；
- propertyName：表示要添加的属性名；
- value：表示该属性的初始值。
例如：
Vue.set(obj, 'newProperty', 123)
此时，obj 对象中就会添加一个名为 newProperty 的属性，并且该属性的默认值为 123。该属性将会被自动追踪，以便在属性值改变时自动刷新视图。
下面是一个完整的例子代码：
-- -------------------- ---- -------
-- ---- --- --
--- -- - --- -----
----- -
---- -
----- ----
-
-
---
-- ---------
--------------- ------ ----
-- ---------
---------- - ---在这个例子中，我们创建了一个名为 vm 的 Vue 实例，并将一个名为 obj 的对象作为数据对象传递给该实例。然后，我们使用 $set 方法添加了一个名为 age 的属性，并将其值设置为 21。最后，我们通过修改 vm.obj.age 属性的值，来验证该属性是否被追踪并自动更新了视图。
总结
Vue.js 是一个非常强大的前端框架，它提供了许多有用的功能来简化我们的开发工作。其中之一就是响应式属性，这是一个非常重要的特性，因为它可以让我们的代码更加简洁和易于理解。本文介绍了 $set 方法，该方法用于向已存在的对象中添加新的响应式属性。希望本文对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ca1c035ad90b6d04199c27