【Vue3】watch监听使用【超详细】
#watch使用结构watch(被监视的数据,监视的回调,配置对象(deep,immediate等...))
let xxx = ref("1111") 或者 reactive({a:1,b:2})
watch(xxx,(newVal,oldVal)=>{
},{
deep:true,immediate:true
})
vue3中watch只能监听的以下四种数据:
[*]一个getter函数(一个能返回值的函数)
[*]ref定义的值
[*]reactive定义的值
[*]包罗以上内容的数组`
情况一:监听ref定义的基本范例数据
watch监听ref简单的基本范例数据
代码展示
<template>
<div class="itemStyle">
<div>
姓名: <input type="text" v-model="name">
</div>
<div>
<button @click="handleChangeName">修改名称</button>
</div>
</div>
</template>
<script setup lang="ts" name="item">
import {ref,reactive,toRefs,toRef,watch} from "vue"
let name = ref("小张")
const handleChangeName = ()=>{
name.value="泰罗奥特曼"
}
watch(name,(newVal,oldVal)=>{
console.log("新值:",newVal);
console.log("旧值:",oldVal);
})
</script>
解除监听案例
<template>
<div class="itemStyle">
<div>
当前数量: <span>{{num}}</span>
</div>
<div>
<button @click="handleAdd">添加数量</button>
</div>
</div>
</template>
<script setup lang="ts" name="item">
import {ref,reactive,toRefs,toRef,watch} from "vue"
let num = ref(1)
const handleAdd = ()=>{
num.value++
}
let stopWatch = watch(num,(newVal,oldVal)=>{
console.log("我监听了");
if(newVal>5){
stopWatch()
}
})
</script>
情况二:监听ref定义的对象范例数据
watch监听ref简单的对象范例数据,若想监视对象内下属性的厘革，必要手动开启深度监视
代码展示
<template>
<div class="itemStyle">
<div>
姓名: <input type="text" v-model="data.name">
</div>
<div>
年龄: <input type="text" v-model="data.age">
</div>
<div>
爱好: <input type="text" v-model="data.hobby">
</div>
<div>
<button type="button" @click="handleChangeData">修改数据</button>
</div>
</div>
</template>
<script setup lang="ts" name="item">
import {ref,reactive,toRefs,toRef,watch} from "vue"
let data = ref({
name:"小张",
age:18,
hobby:"打篮球"
})
const handleChangeData = ()=>{
data.value = {
name:"小红",
age:20,
hobby:"打乒乓球"
}
}
watch(data,(newVal,oldVal)=>{
console.log("新值:",newVal);
console.log("旧值:",oldVal);
},{
deep:true,//开启深度监听
})
</script>
情况三:监听reactive定义的对象范例数据
特别注意:如果监听reactive对象中的地址值，默认开启深度监听的，不能关闭
代码展示
<template>
<div class="itemStyle">
<div>
姓名: <input type="text" v-model="data.name">
</div>
<div>
年龄: <input type="text" v-model="data.age">
</div>
<div>
爱好: <input type="text" v-model="data.hobby">
</div>
<div>
其他: <input type="text" v-model="data.other.c.d">
</div>
<div>
<button type="button" @click="handleChangeData">修改数据</button>
</div>
</div>
</template>
<script setup lang="ts" name="item">
import {ref,reactive,toRefs,toRef,watch} from "vue"
let data = reactive({
name:"小张",
age:18,
hobby:"打篮球",
other:{
a:"1111",
b:"2222",
c:{
d:"1111",
e:"2222",
}
}
})
const handleChangeData = ()=>{
Object.assign(data,{
name:"小红",
age:20,
hobby:"打乒乓球"
})
}
//此时是有问题的：oldVal会和newVal数据保持一致，当data里面的任意值改变，都会触发该监听,强制开启深度监听
//watch(data,(newVal,oldVal)=>{
// console.log("新值:",newVal);
// console.log("旧值:",oldVal);
//})
//使用()=>箭头函数监听data对象中name属性
watch(()=>data.name,(newVal,oldVal)=>{
console.log("新值:",newVal);
console.log("旧值:",oldVal);
})
</script>
情况四:监听ref或reactive定义的对象范例数据中某个属性
特别注意:
[*]若该属性值不是【对象范例】，必要写成函数形式
[*]若该属性值是依然是【对象范例】，可直接写，也可以写成函数，建议写成函数。
结论:监视的要是对象里的属性，那么最好写函数式。
注意点:如果对象监视的是地址值，必要关注对象内部，必要手动开启深度监视。
代码展示
<template>
<div class="itemStyle">
<div>
姓名: <input type="text" v-model="data.name">
</div>
<div>
年龄: <input type="text" v-model="data.age">
</div>
<div>
爱好: <input type="text" v-model="data.hobby">
</div>
<div>
其他: <input type="text" v-model="data.other.c.d">
</div>
<div>
<button type="button" @click="handleChangeOtherData">修改其他</button>
</div>
</div>
</template>
<script setup lang="ts" name="item">
import {ref,reactive,toRefs,toRef,watch} from "vue"
let data = reactive({
name:"小张",
age:18,
hobby:"打篮球",
other:{
a:"1111",
b:"2222",
c:{
d:"1111",
e:"2222",
}
}
})
const handleChangeOtherData = ()=>{
data.other.c={
d:"wwwww",
e:"qqqqq",
}
}
//监视响应式对象中的某个属性，且该属性是基本类型的，要写成函数
watch(()=>data.name,(newVal,oldVal)=>{
console.log("新值:",newVal);
console.log("旧值:",oldVal);
})
//监视响应式对象中的某个属性，且该属性是对象类型的，可以直接写，也能写函数，更推荐写函数
watch(()=>data.other.c,(newVal,oldVal)=>{
console.log("新值:",newVal);
console.log("旧值:",oldVal);
})
</script>
情况五:监听上述多个数据
代码展示
<template>
<div class="itemStyle">
<div>
姓名: <input type="text" v-model="data.name">
</div>
<div>
年龄: <input type="text" v-model="data.age">
</div>
<div>
爱好: <input type="text" v-model="data.hobby">
</div>
<div>
其他: <input type="text" v-model="data.other.c.d">
</div>
<div>
<button type="button" @click="handleChangeOtherData">修改其他</button>
</div>
</div>
</template>
<script setup lang="ts" name="item">
import {ref,reactive,toRefs,toRef,watch} from "vue"
let data = reactive({
name:"小张",
age:18,
hobby:"打篮球",
other:{
a:"1111",
b:"2222",
c:{
d:"1111",
e:"2222",
}
}
})
const handleChangeOtherData = ()=>{
data.other.c={
d:"wwwww",
e:"qqqqq",
}
}
//监视，情况五:监视上述的多个数据
watch(,(newVal,oldVal)=>{
console.log("新值:",newVal);
console.log("旧值:",oldVal);
},{deep:true})
</script>
✨ 踩坑不易，还希望各位大佬支持一下 \textcolor{gray}{踩坑不易，还希望各位大佬支持一下} 踩坑不易，还希望各位大佬支持一下
页:
[1]