Vue3前端开发,watch侦听器的深度监听和精确监听

Vue3前端开发,watch侦听器的深度监听和精确监听！今天和大家分享的内容是，关于watch的深度侦听和精确监听。

首先看一下，第一个案例，练习的是，深度监听的效果。默认是浅的侦听，是不会触发回调函数的。

---

---

如图，当我们点击按钮，修改num值的时候，触发了回调函数，在控制台打印了内容。

如果把参数deep:true去掉，就不会触发这个回调函数。大家可以试试看。

---

下面展示的是，同时侦听一个符合对象的情况下，开启深度侦听的情况如何。

如图代码，我们定义了userInfo对象，里面有一个name和age.2个属性。

当我们侦听这个userInfo对象时，无论我们修改任何一个属性，都会触发回调函数的。

如图，我们修改了name,从admin，改成了petter.触发了回调函数。

如图所示，我们修改了age.从24，变成了34.同样会触发回调函数的。如果，我们只想精确的侦听到name的变化，该怎么办？就是：使用精确侦听的方式。

---

watch(
    ()=>userInfo.value.name,
    ()=>{
        console.log('触发侦听了！name变化了');
    }
)

如图，我们的侦听器内应该这样写。使用一个回调函数的形式，把我们精确侦听的那个参数，写入到watch的第一个参数的位置。【如果你想同时侦听多个，可以使用数组的形式传参。】。

如图，name确实改成了petter.触发了回调函数了，此时此刻，我们如果去修改age.是不会触发回调函数的。

---

1：watch函数的第一个参数，ref对象不需要加value，它会自己默认处理的。
2：watch可以侦听一个，也可以同时侦听多个数据。
3：watch默认是浅侦听模式，直接修改嵌套属性不能触发回调函数，想触发需要开启深度侦听模式。
4：watch如果想精确侦听某个属性，可以把该属性，以回调函数的形式写出来，放在参数的位置。