watch监视的5种情况
情况1 监视【ref】定义的【基本类型】数据
<template>
<div class="person">
<h1>情况1：监视【ref】定义的【基本类型】数据</h1>
<h2>求和：{{ sum }}</h2>
<button @click="changeSum">sum+1</button>
</div>
</template>
<script lang="ts" setup name="Person">
import {ref,watch} from 'vue'
let sum = ref(0)
function changeSum() {
sum.value += 1
}
// 增加监视
// watch(sum,(newVal,oldVal)=>{
// console.log('sum changed',newVal,oldVal);
// })
// 停止监视
const stopWatch = watch(sum,(newVal,oldVal)=>{
console.log('sum changed',newVal,oldVal);
if(newVal >= 10) {
stopWatch()
}
return 0
})
</script>
<style scoped>
.person {
background-color: skyblue;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
button {
margin : 0 5px;
}
li {
font-size : 20px;
}
</style>
情况2：监视【ref】定义的【对象类型】数据
<template>
<div class="person">
<h1>情况2：监视【ref】定义的【对象类型】数据</h1>
<h2>姓名：{{person.name}}</h2>
<h2>年龄：{{person.age}}</h2>
<button @click="changeName">changeName</button>
<button @click="changeAge">changeAge</button>
<button @click="changePerson">changePerson</button>
</div>
</template>
<script lang="ts" setup name="Person">
import {ref,watch} from 'vue'
let person = ref({
name:'zhangsan',
age:20
})
function changeName(){
person.value.name = 'lisi'
}
function changeAge(){
person.value.age++
}
function changePerson(){
person.value = {name:'lalala',age:30}
}
// 仅监视对象的地址值,当整个对象发生变化时，监视生效
// watch(person,(newVal,oldVal)=>{
// console.log(newVal,oldVal);
// })
// 监视对象内部值的变化（开启深度监视deep 问题：此时由于对象没有变化，因此取到的新、旧值均为新值
watch(person,(newVal,oldVal)=>{
console.log(newVal,oldVal);
},{deep:true})
</script>
<style scoped>
.person {
background-color: skyblue;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
button {
margin : 0 5px;
}
li {
font-size : 20px;
}
</style>
情况3：监视【reactive】定义的【对象类型】数据
- 默认开启深度监视，无法关闭
<template>
<div class="person">
<h1>情况3：监视【reactive】定义的【对象类型】数据</h1>
<h2>姓名：{{person.name}}</h2>
<h2>年龄：{{person.age}}</h2>
<button @click="changeName">changeName</button>
<button @click="changeAge">changeAge</button>
<button @click="changePerson">changePerson</button>
</div>
</template>
<script lang="ts" setup name="Person">
import {reactive,watch} from 'vue'
let person = reactive({
name:'zhangsan',
age:20
})
function changeName(){
person.name = 'lisi'
}
function changeAge(){
person.age++
}
function changePerson(){
// person = {name:'lalala',age:30}
// 仅修改对象内的值，对象地址不变
Object.assign(person,{name:'lalala',age:30})
}
// 仅监视对象的地址值,当整个对象发生变化时，监视生效
// watch(person,(newVal,oldVal)=>{
// console.log(newVal,oldVal);
// })
// 默认开启深度监视
watch(person,(newVal,oldVal)=>{
console.log(newVal,oldVal)
})
</script>
<style scoped>
.person {
background-color: skyblue;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
button {
margin : 0 5px;
}
li {
font-size : 20px;
}
</style>
情况4：监视【reactive/ref】定义的【对象类型】数据中的某个属性
推荐使用：函数+深度
<template>
<div class="person">
<h1>情况4：监视【reactive/ref】定义的【对象类型】数据中的某个属性</h1>
<h2>姓名：{{person.name}}</h2>
<h2>年龄：{{person.age}}</h2>
<h2>车：{{ person.car.c1 }}、{{ person.car.c2 }}</h2>
<button @click="changeName">changeName</button>
<button @click="changeAge">changeAge</button>
<button @click="changeC1">changeC1</button>
<button @click="changeC2">changeC2</button>
<button @click="changeCar">changeCar</button>
</div>
</template>
<script lang="ts" setup name="Person">
import {reactive,watch} from 'vue'
let person = reactive({
name:'zhangsan',
age:20,
car:{
c1:'第一',
c2:'第二'
}
})
function changeName(){
person.name += '!'
}
function changeAge(){
person.age++
}
function changeC1(){
person.car.c1 = '333'
}
function changeC2(){
person.car.c2 = '444'
}
function changeCar(){
person.car = {
c1:'555',
c2:'666'
}
}
// 要监视的值不是对象，需要写成函数
watch(()=>person.name,(newVal,oldVal)=>{
console.log('person.name changed',newVal,oldVal);
})
// 要监视是值仍然是对象，可以直接写，但建议写成函数
// 直接写时，如果改变整个对象，则无法监视到
watch(person.car,(newVal,oldVal)=>{
console.log('person.car changed',newVal,oldVal)
},{deep:true})
// 写成函数+深度，可以监视到所有变化
watch(()=>person.car,(newVal,oldVal)=>{
console.log('person.car changed',newVal,oldVal)
},{deep:true})
</script>
<style scoped>
.person {
background-color: skyblue;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
button {
margin : 0 5px;
}
li {
font-size : 20px;
}
</style>
情况5：监视上述的多个数据
使用数组
watch([()=>person.car.c1,()=>person.name],(newVal,oldVal)=>{
console.log('person.car changed',newVal,oldVal)
},{deep:true})
watchEffect
// 使用watch，需要监视这两个数据（如果有10个数据，要监视10个
// watch([temp,height],()=>{
// if(temp.value > 50 || height.value > 70){
// console.log('hhhhhhhhhhhh')
// }
// })
// 使用watchEffect,自动监视所有变化的数据
watchEffect(()=>{
if(temp.value > 50 || height.value > 70){
console.log('hhhhhhhhhhhh')
}
})