1.问题描述
在Vue开发过程中，当我们在监听响应式数据时，可能会遇到无法正确使用watch的情况，导致无法实现数据的实时监听、更新等操作。具体表现为出现如下错误提示：
[Vue warn]:
Failed watching path:"这里是监听的数据路径"
Watcher only accepts simple dot-delimited paths.
For full control, use a function instead.
这种情况在实际开发中是比较常见的，本文将从原因分析和解决方案两个方面来进行讲解。
2.问题原因
这种错误提示通常是因为我们在监听的数据路径中使用了复杂的表达式或者函数，导致watch无法正确解析。例如，下面这种写法就容易触发watch的错误：
...
data() {
return {
inputVal: '',
inputValue: '',
}
},
watch: {
'inputVal+inputValue': function(val) { //错误写法
console.log(val);
},
},
...
在这段代码中，我们监听了inputVal和inputValue两个响应式数据并计算它们之和，然后再通过watch来监听它们的变化。这种写法本身没有问题，但是在Vue中watch只支持简单的点分隔符路径，也就是说它只支持监听一个“干净”的数据路径。如果出现了一些计算、方法、函数等，就会触发这种错误提示。因此，我们需要针对具体的场景给出相应的解决方案。
3.解决方案
3.1使用$watch方法代替watch属性
如果我们的监听路径较为复杂，可以使用Vue提供的$watch方法来代替watch属性，这样可以实现更加灵活的监听和处理。
...
data() {
return {
inputVal: '',
inputValue: '',
}
},
watch: {
// 'inputVal+inputValue': function(val) { //错误写法
// console.log(val);
// },
},
mounted() { //在mounted生命周期中使用$watch方法
this.$watch(function() { //监听的处理函数
return this.inputVal + this.inputValue;
}, function(newVal, oldVal) { //数据变化时的回调函数
console.log(newVal, oldVal);
})
},
...
在这段代码中，我们使用$watch方法来监听inputVal和inputValue的变化并计算它们之和。其中，第一个参数是监听的处理函数，返回要监听的数据路径，第二个参数是数据变化时的回调函数，以响应数据变化。这种方式可以灵活地监听和处理响应式数据的变化，尤其适用于一些需要处理较复杂场景的情况。
3.2使用计算属性
如果我们需要对多个响应式数据进行计算并监听其变化，可以使用计算属性来进行处理。计算属性本质上是一个函数，可以根据响应式数据的变化来重新计算。因此，通过使用计算属性，我们可以很方便地监听并处理数据变化。
...
data() {
return {
inputVal: '',
inputValue: '',
}
},
computed: {
sumVal() { //计算属性
return this.inputVal + this.inputValue;
}
},
watch: {
sumVal(newVal, oldVal) { //监听计算属性的变化
console.log(newVal, oldVal);
}
},
...
在这段代码中，我们定义了一个计算属性sumVal来计算inputVal和inputValue的和，然后通过watch属性来监听它的变化并处理。使用计算属性的方式相比于$watch方法更为直观，也更加符合Vue的响应式数据绑定特点。
3.3使用深度监听
如果我们需要监听的响应式数据是一个对象或数组，可以使用深度监听来解决。Vue提供了deep选项来实现深度监听，其默认值为false。将其设置为true，则可以深度监听响应式数据的变化，包括对象和数组中的元素。
...
data() {
return {
person: {
name: 'Tom',
age: 18,
}
}
},
watch: {
person: {
deep: true, //设置为深度监听
handler(newVal, oldVal) {
console.log(newVal, oldVal);
}
}
},
...
在这段代码中，我们使用watch属性深度监听了person对象的变化，并在数据变化时打印了新旧值。通过设置deep选项为true，我们可以监听响应式对象的变化，包括对象中嵌套的属性。需要注意的是，使用深度监听的方式会增加性能开销，因此应该谨慎使用。
4.总结
在Vue开发过程中，使用watch属性监听响应式数据是非常常见的情况。但是，在处理一些特殊场景时，会出现watch无法正确解析的情况，导致无法实现数据的实时监听和更新等操作。本文从原因分析和解决方案两个方面介绍了多种解决方法，包括使用$watch方法代替watch属性、使用计算属性、使用深度监听等。需要根据具体的场景来选择合适的解决方案，从而实现更加灵活、高效的Vue开发。