English
资源说明：Vue2 中的 $watch 监听注意事项
在 Vue2 中，$watch 是一个非常重要的功能，它允许开发者监听数据的变化，并执行相应的操作。然而，在使用 $watch 时，需要注意一些重要的事项，否则可能会出问题。本文将详细介绍 Vue2 中 $watch 的注意事项。
1. 监听对象时，不要监听整个对象，而是监听对象中的某个属性
在使用 $watch 时，经常会遇到监听对象的问题。例如，我们有一个对象 `msgs`，其中包含一个数组 `list`。如果我们想监听 `list` 的变化，可以使用 `$watch` 监听 `msgs`，但是这样会有问题。因为 `msgs` 是一个对象，监听 `msgs` 会导致 `msgs` 中的所有属性变化都会触发监听函数。
正确的做法是监听 `msgs` 中的 `list` 属性，而不是整个 `msgs` 对象。例如：
```javascript
data() {
return {
msgs: {
list: [1, 2, 3]
}
}
},
watch: {
'msgs.list': function(newVal, oldVal) {
console.log(newVal);
}
}
```
在上面的例子中，我们监听 `msgs.list` 的变化，而不是整个 `msgs` 对象。这可以避免不必要的监听函数触发。
2. 监听数组时，需要使用 `$set` 方法
在 Vue2 中，如果我们想监听一个数组的变化，需要使用 `$set` 方法来更新数组。例如：
```javascript
mounted() {
this.$set(this.msgs, "list", [1, 2, 3, 4]);
}
```
在上面的例子中，我们使用 `$set` 方法来更新 `msgs.list` 数组。这将触发 `msgs.list` 的监听函数。
3. 监听树形结构时，需要注意子节点的变化
在 Vue2 中，数据对象可以被看作是一个树形结构。每个叶子节点都可以被监听，并且可以触发监听函数。例如：
```javascript
data() {
return {
msgs: {
list: [1, 2, 3],
msg: '1'
}
}
},
watch: {
msgs: function(newVal, oldVal) {
console.log(newVal);
},
'msgs.list': function(newVal, oldVal) {
console.log(newVal);
},
'msgs.msg': function(newVal, oldVal) {
console.log(newVal);
}
}
```
在上面的例子中，我们监听 `msgs` 的变化，并且监听 `msgs.list` 和 `msgs.msg` 的变化。当 `msgs` 中的某个子节点变化时，相应的监听函数将被触发。
4. 使用 `$set` 方法时，需要注意对象的变化
在使用 `$set` 方法时，需要注意对象的变化。如果我们更新一个对象的某个属性，将会触发该属性的监听函数。例如：
```javascript
mounted() {
this.$set(this.msgs, "list", [1, 2, 3, 4]);
}
```
在上面的例子中，我们更新 `msgs.list` 数组，将会触发 `msgs.list` 的监听函数。
使用 $watch 时需要注意监听对象时不要监听整个对象，而是监听对象中的某个属性；使用 `$set` 方法时需要注意对象的变化；在监听树形结构时，需要注意子节点的变化。遵循这些注意事项，可以确保我们的应用程序正确地工作。
本源码包内暂不包含可直接显示的源代码文件，请下载源码包。
