Vue3前端开发,watch侦听器的深度监听和精确监听!今天和大家分享的内容是,关于watch的深度侦听和精确监听。
首先看一下,第一个案例,练习的是,深度监听的效果。默认是浅的侦听,是不会触发回调函数的。
<script setup>
import state from '@/store/state';
import {ref,watch} from 'vue'
const price = ref({num:10})
const changePriceByNum = ()=>{
//直接修改num
price.value.num++
}
//watch深度侦听测试
watch(price,()=>{
console.log('num变化了');
},{
deep:true
})
</script>
<template>
<h3>watch侦听器练习2-精确侦听和深度侦听</h3>
<p>草莓单价是:{{ price.num }}</p>
<button @click="changePriceByNum">修改num</button>
</template>
如图,当我们点击按钮,修改num值的时候,触发了回调函数,在控制台打印了内容。
如果把参数deep:true去掉,就不会触发这个回调函数。大家可以试试看。
下面展示的是,同时侦听一个符合对象的情况下,开启深度侦听的情况如何。
<script setup>
import state from '@/store/state';
import {ref,watch} from 'vue'
const price = ref({num:10})
const changePriceByNum = ()=>{
//直接修改num
price.value.num++
}
const userInfo = ref({
name:'admin',
age:24
})
const changeName =()=>{
//修改name
userInfo.value.name = 'pitter'
}
const changeAge = () => {
//修改age
userInfo.value.age = 34
}
//watch深度侦听测试
watch(price,()=>{
console.log('num变化了');
},{
deep:true
})
watch(userInfo,()=>{
console.log('触发了回调函数')
},{
deep:true
})
</script>
<template>
<h3>watch侦听器练习2-精确侦听和深度侦听</h3>
<p>草莓单价是:{{ price.num }}</p>
<button @click="changePriceByNum">修改num</button>
<hr />
<p>name-{{ userInfo.name }}</p>
<p>age-{{ userInfo.age }}</p>
<button @click="changeName">修改name</button>
<button @click="changeAge">修改age</button>
</template>
如图代码,我们定义了userInfo对象,里面有一个name和age.2个属性。
当我们侦听这个userInfo对象时,无论我们修改任何一个属性,都会触发回调函数的。
如图,我们修改了name,从admin,改成了petter.触发了回调函数。
如图所示,我们修改了age.从24,变成了34.同样会触发回调函数的。如果,我们只想精确的侦听到name的变化,该怎么办?就是:使用精确侦听的方式。
watch(
()=>userInfo.value.name,
()=>{
console.log('触发侦听了!name变化了');
}
)
如图,我们的侦听器内应该这样写。使用一个回调函数的形式,把我们精确侦听的那个参数,写入到watch的第一个参数的位置。【如果你想同时侦听多个,可以使用数组的形式传参。】。
如图,name确实改成了petter.触发了回调函数了,此时此刻,我们如果去修改age.是不会触发回调函数的。文章来源:https://www.toymoban.com/news/detail-819129.html
1:watch函数的第一个参数,ref对象不需要加value,它会自己默认处理的。
2:watch可以侦听一个,也可以同时侦听多个数据。
3:watch默认是浅侦听模式,直接修改嵌套属性不能触发回调函数,想触发需要开启深度侦听模式。
4:watch如果想精确侦听某个属性,可以把该属性,以回调函数的形式写出来,放在参数的位置。文章来源地址https://www.toymoban.com/news/detail-819129.html
到了这里,关于Vue3前端开发,watch侦听器的深度监听和精确监听的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!