在使用 Vue.js 进行开发时，我们经常需要对组件的数据进行观察和调试。Vue 提供了 watch 和 computed 两种方式来实现数据的监控，但是当数据有多层嵌套时，如何正确观察嵌套属性呢？
问题描述
假设我们有一个嵌套的数据结构：
-- -------------------- ---- -------
------ -
------ -
----- -
----- -----
---- ---
-------- -
--------- -----
----- -----
--
--
--
--如果我们需要监控 address.province 的变化，一般会写出如下代码：
watch: {
"user.address.province": function (newValue, oldValue) {
console.log("province changed from", oldValue, "to", newValue);
},
},然而，这样的代码并不能起到我们想要的效果！因为在 Vue 中，只有顶层的属性才会被 Vue 实例的响应式系统所追踪，底层的属性并不会被追踪。当我们修改 address.province 时，并不会触发 watch。
那么，如何正确观察嵌套属性呢？
解决方案
Vue 提供了一个 $set() 方法，可以将一个对象或数组设置为响应式的。使用 $set() 方法后，即使是嵌套属性，也会被 Vue 实例的响应式系统所追踪。
this.$set(this.user.address, "province", "北京");
然而，如果数据层级很深，每次都手动调用 $set() 方法就显得非常麻烦。更好的解决方案是使用 Vue.set() 或 this.$set() 的别名：
import Vue from "vue"; Vue.set(this.user.address, "province", "北京"); // 或者 this.$set(this.user.address, "province", "北京");
这样，当我们修改 address.province 时，就能正确触发 watch。
示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
----------
------- --------------------- --------
-----------
--------
------ --- ---- ------
------ ------- -
------ -
------ -
----- -
----- -----
---- ---
-------- -
--------- -----
----- -----
--
--
--
--
------ -
------------------------ -------- ---------- --------- -
--------------------- ------- ------ --------- ----- ----------
--
--
--------- -
-- ---------- -----
-------------------------- - -----
-- -------- ---------
-------------------------- ----------- ------
-- ---- -----------
---------------------------- ----------- ------
--
--
---------总结
在 Vue.js 中，当我们需要观察嵌套属性时，需要将嵌套属性设置为响应式的。可以使用 $set() 或 Vue.set() 方法来实现。这样，即使是嵌套属性，也能被 Vue 实例的响应式系统所追踪，从而正确触发 watch 或 computed。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13402