文章目录

情况一:监听ref定义的基本类型数据情况二:监听ref定义的对象类型数据情况三:监听reactive定义的对象类型数据情况四:监听ref或reactive定义的对象类型数据中某个属性情况五:监听上述多个数据

#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([data.other.c,()=>data.name,()=>data.age,()=>data.hobby],(newVal,oldVal)=>{

console.log("新值:",newVal);

console.log("旧值:",oldVal);

},{ deep:true})

</script>

✨

踩坑不易，还希望各位大佬支持一下

\textcolor{gray}{踩坑不易，还希望各位大佬支持一下}

踩坑不易，还希望各位大佬支持一下

📃

个人主页：

\textcolor{green}{个人主页：}

个人主页： 沉默小管

📃

个人网站：

\textcolor{green}{个人网站：}

个人网站： 沉默小管

📃

个人导航网站：

\textcolor{green}{个人导航网站：}

个人导航网站： 沉默小管导航网

📃

我的开源项目：

\textcolor{green}{我的开源项目：}

我的开源项目： vueCms.cn

🔥

技术交流

Q

Q

群：

837051545

\textcolor{green}{技术交流QQ群：837051545}

技术交流QQ群：837051545

👍

点赞，你的认可是我创作的动力！

\textcolor{green}{点赞，你的认可是我创作的动力！}

点赞，你的认可是我创作的动力！

⭐️

收藏，你的青睐是我努力的方向！

\textcolor{green}{收藏，你的青睐是我努力的方向！}

收藏，你的青睐是我努力的方向！

✏️

评论，你的意见是我进步的财富！

\textcolor{green}{评论，你的意见是我进步的财富！}

评论，你的意见是我进步的财富！

如果有不懂可以留言，我看到了应该会回复

如有错误，请多多指教