watch
一、 watch 基础认识
watch作用: 监视数据的变化(和vue2中的watch作用一致)
特点: vue3 中的 watch 只能监视以下四种数据:
- ref 定义的数据
- reactive 定义的数据
- 函数返回一个值(getter 函数)
- 一个包含上诉内容的数据
1. 监视 ref 定义的【基本类型】数据
- 直接写数据名即可,监视的是其 value 值的改变
- 返回的 stopWatch 是一个回调函数,可以通过 stopWatch()停止监视
举例如下:
<script lang="ts" setup name="Person">
import {ref,watch} from 'vue'
// 数据
let sum = ref(0)
// 方法
function changeSum(){
sum.value += 1
}
// 监视,情况一:监视【ref】定义的【基本类型】数据
const stopWatch = watch(sum,(newValue,oldValue)=>{
console.log('sum变化了',newValue,oldValue)
if(newValue >= 10){
stopWatch() // 停止监视
}
})
</script>
2. 监视 ref 定义的【对象类型】的数据
- 如果直接写数据名,监视的是对象的地址值
- 如果想要监视对象内部的数据,要手动开启深度监视(deep:true)
- 开启 immediate:true 后刚打开页面就会监视一次
关于浅拷贝和深拷贝:
- 浅拷贝只复制了地址
- 深拷贝是玩玩全全复制一份数据,但是地址不同
注意:
- 如果修改的是 ref 定义的对象中的属性,则 newValue 和 oldValue 都是新值,因为他们是同一个对象
- 如果修改的是 ref 定义的对象,newValue 是新值,oldValue 是旧值,因为不是同一个对象了
举例如下:
<script lang="ts" setup name="Person">
import {ref,watch} from 'vue'
// 数据
let person = ref({
name:'张三',
age:18
})
// 方法
function changeName(){
person.value.name += '~'
}
function changeAge(){
person.value.age += 1
}
function changePerson(){
person.value = {name:'李四',age:90}
}
/*
监视,情况二:监视【ref】定义的【对象类型】数据,监视的是对象的地址值,若想监视对象内部属性的变化,需要手动开启深度监视
watch的第一个参数是:被监视的数据
watch的第二个参数是:监视的回调
watch的第三个参数是:配置对象(deep、immediate等等.....)
*/
watch(person,(newValue,oldValue)=>{
console.log('person变化了',newValue,oldValue)
},{deep:true, immediate: true})
</script>
3. 监视 reactive 定义的【对象类型】的数据
- 监视 reactive 定义的对象类型的数据,默认会开启深度监视,而且无法关闭深度监视
举例如下:
<script lang="ts" setup name="Person">
import {reactive,watch} from 'vue'
// 数据
let person = reactive({
name:'张三',
age:18
})
let obj = reactive({
a:{
b:{
c:666
}
}
})
// 方法
function changeName(){
person.name += '~'
}
function changeAge(){
person.age += 1
}
function changePerson(){
Object.assign(person,{name:'李四',age:80})
}
function test(){
obj.a.b.c = 888
}
// 监视,情况三:监视【reactive】定义的【对象类型】数据,且默认是开启深度监视的
watch(person,(newValue,oldValue)=>{
console.log('person变化了',newValue,oldValue)
})
watch(obj,(newValue,oldValue)=>{
console.log('Obj变化了',newValue,oldValue)
})
</script>
4. 监视 ref 或 reactive 定义的【对象类型】数据中的【某个属性】
监视 ref 或 reactive 定义的【对象类型】数据中的某个属性,注意点如下:
- 若该属性值不是【对象类型】,需要写成函数形式
- 若该属性值是依然是【对象类型】,可直接写,也可写成函数,建议写成函数
结论: 监视的要是对象里的属性,那么最好写函数式
举例如下:
<template>
<div class="box">
<div>姓名:{{ person.name }}</div>
<div>年龄:{{ person.age }}</div>
<div>汽车1:{{ person.car.c1 }}</div>
<div>汽车2:{{ person.car.c2 }}</div>
<br>
<button @click="changeName">改变姓名</button>
<button @click="changeAge">改变年龄</button>
<button @click="changeC1">改变汽车1</button>
<button @click="changeC2">改变汽车2</button>
<button @click="changeCar">改变所有车</button>
</div>
</template>
<script lang="ts" setup name="Person111">
import { reactive ,watch } from 'vue'
let person = reactive({
name: '张三',
age: 18,
car: {
c1: '奔驰',
c2: '劳斯莱斯'
}
})
function changeName() {
person.name += '~'
}
function changeAge() {
person.age += 1
}
function changeC1() {
person.car.c1 = '爱玛'
}
function changeC2() {
person.car.c2 = '雅迪'
}
function changeCar() {
person.car = { c1: '小电驴1', c2: '小电驴2'}
}
// 监视 情况四:监视【对象类型】的数据中的某个属性,该属性是基本类型
watch(() => person.name, (newValue, oldValue) => {
console.log('name发生变化了',newValue, oldValue)
})
// 监视 情况四:监视【对象类型】的数据中的某个属性,该属性是对象类型
// 监视效果:只有car整个发生变化才能监视到,car.c1发生变化监视不到,如果想要car.c1也能监视到,就开启深度监视
watch(() => person.car, (newValue, oldValue) => {
console.log('person.car发生改变了',newValue, oldValue)
}, { deep: true })
</script>
5. 监视上诉的多个数据
举例如下:
<script lang="ts" setup name="Person">
import {reactive,watch} from 'vue'
// 数据
let person = reactive({
name:'张三',
age:18,
car:{
c1:'奔驰',
c2:'宝马'
}
})
// 方法
function changeName(){
person.name += '~'
}
function changeAge(){
person.age += 1
}
function changeC1(){
person.car.c1 = '奥迪'
}
function changeC2(){
person.car.c2 = '大众'
}
function changeCar(){
person.car = {c1:'雅迪',c2:'爱玛'}
}
// 监视,情况五:监视上述的多个数据
watch([()=>person.name,person.car],(newValue,oldValue)=>{
console.log('person.car变化了',newValue,oldValue)
},{deep:true})
</script>
二、watchEffect
- 官网解释:立即运行一个函数,同时响应式地追踪其依赖,并在依赖更改时重新执行该函数。
- watch 对比 watchEffect
- 都能监听响应式数据的变化,不同的是监听数据变化的方式不同
- watch:要明确指出监视的数据
- watchEffect:不用明确指出监视的数据(函数中用到哪些属性,那就监视哪些属性)
举例如下:
<template>
<div class="person">
<h1>需求:水温达到50℃,或水位达到20cm,则联系服务器</h1>
<h2 id="demo">水温:{{temp}}</h2>
<h2>水位:{{height}}</h2>
<button @click="changePrice">水温+1</button>
<button @click="changeSum">水位+10</button>
</div>
</template>
<script lang="ts" setup name="Person">
import {ref,watch,watchEffect} from 'vue'
// 数据
let temp = ref(0)
let height = ref(0)
// 方法
function changePrice(){
temp.value += 10
}
function changeSum(){
height.value += 1
}
// 用watch实现,需要明确的指出要监视:temp、height
watch([temp,height],(value)=>{
// 从value中获取最新的temp值、height值
const [newTemp,newHeight] = value
// 室温达到50℃,或水位达到20cm,立刻联系服务器
if(newTemp >= 50 || newHeight >= 20){
console.log('联系服务器')
}
})
// 用watchEffect实现,不用
const stopWtach = watchEffect(()=>{
// 室温达到50℃,或水位达到20cm,立刻联系服务器
if(temp.value >= 50 || height.value >= 20){
console.log(document.getElementById('demo')?.innerText)
console.log('联系服务器')
}
// 水温达到100,或水位达到50,取消监视
if(temp.value === 100 || height.value === 50){
console.log('清理了')
stopWtach()
}
})
</script>