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