一、Watch
监听数据变化
-
三个参数：
第一个：数据来源 函数返回值 ref 响应式对象 或以上类型的数组
第二个：回调函数 (新值，旧值)=>{ }
第三个： 可选参 deep flush
-
关闭监听器 stop
二、WatchEffect
开始会执行一次，监听数据变化会执行
-
两个参数
第一个参数：回调函数
第二个参数：可选参
三、看代码
Watch
<template>
<Text :age="age"></Text>
<div>
<p> home</p>
<p>{{ num }}</p>
<p>{{ obj }}</p>
<p>{{ age }}</p>
<p id="key">{{ book.key }}</p>
<button @click="num++">改数字</button>
<button @click="obj.age++">改年龄</button>
<button @click="obj.book.key++">key</button>
</div>
</template>
(1)
const num = ref(0)
// watch 监听
watch(num,(newA,oldA)=>{
console.log(newA,oldA);// 1 0
})
(2)
const obj = reactive({ name: '张三', age: 18, book: { key: 111 } })
const { name, age, book } = toRefs(obj) // reactive 对象 内部变为响应式
// watch 监听
watch(() => obj.age, (newO, oldO) => {
console.log(newO, oldO); // 19 18
})
(3)
const stop = watch(() => book.value.key, (newO, oldO) => {
console.log(newO, oldO); // 112 111
console.log(document.getElementById('key')?.innerHTML); //最新值 112
}, {
flush: 'post' // 开启 获取 最新值
})
stop() // 关闭监听器
WatchEffect
// 隐士监听
watchEffect(()=>{
console.log(age.value,'age'); // 18 'age'
})
