在进行 Vue.js 开发时, 我们难免会碰到需要监听数组或对象变化的情况。通常情况下，我们会使用 watch 属性去监听变化，但是由于 JavaScript 中的数组和对象是引用类型，如果直接监听，则会发现无法正常获取到变化，甚至会导致系统抛出意料之外的错误。本文将介绍如何在 Vue.js 发现这个问题后解决它。
前置知识
在深入讨论如何解决问题前，我们需要对 Vue.js watch 和 JavaScript 引用类型做一些了解。
Vue.js 的 watch
在 Vue.js 中，watch 属性用来监听指定数据变化并触发回调函数，具体的使用可以参考下面的示例:
watch: {
dataList() {
console.log('数据列表变化');
}
}上面的代码表示监听 dataList 的变化，并在变化发生时打印一段文字。
JavaScript 引用类型
在 JavaScript 中，引用类型有对象和数组两种，这两种数据类型都是由指针指向一段内存空间。也就是说，如果我们定义：
let obj1 = { foo: 'bar' };
let obj2 = obj1;obj1 和 obj2 会共用同一个内存空间。如果我们修改 obj2.foo，则会影响到 obj1.foo：
obj2.foo = 'baz'; console.log(obj1.foo); // 'baz'
解决方案
有了上述的前置知识，我们来看看如何解决 Vue.js 监听数组和对象变化时出现的问题。
1. 监听对象
当我们希望监听一个对象内某个属性的修改时，可以使用深度监听，这样在属性值改变时可以触发回调函数。示例代码如下：
watch: {
objcetData: {
handler(newVal, oldVal) {
console.log('数据对象变化');
},
deep: true
}
}在上述示例代码中，我们监听的是对象对象数据的变化（objectData），并通过 deep: true 指定了深度监听。这样在 objectData 中任意一层的数据发生变化时都会触发 handler 回调函数。
2. 监听数组
如果我们想要监听数组变化，我们需要使用 Vue.js 提供的 $set 方法对数组进行修改。具体地，每当我们对数组进行 push、pop、splice 等操作时，都需要使用 $set 方法进行操作，示例代码如下：
methods: {
addData(data) {
this.$set(this.arrayData, this.arrayData.length, data);
}
}在上述示例代码中，我们通过 $set 方法添加了一个新的数据到数组中。
3. 监听对象和数组
当我们希望监听一个对象内某个属性或者数组内某个元素的修改时，则需要结合以上两种思路，示例代码如下：
-- -------------------- ---- -------
------ -
--------- -
--------------- ------- -
-------------------------
--
----- ----
-
--
-------- -
------------- ------ -
------------------------ ------ ------
-
-在上述示例代码中，我们通过监听 fullData 实现了对对象和数组同时进行监听，同时在设置数据时还使用了 $set 方法。
结束语
本文通过介绍 Vue.js 监听数组/对象变化的问题，介绍了解决此类问题的方法，其中还涉及了 JavaScript 中的引用类型的相关知识。希望本文能对您在使用 Vue.js 过程中遇到的类似问题有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67823d2a935627c900fdf415
