监听变化
vue3版本watch(1,2,3) 接收三个参数
第1个参数 需要监听的数据
第2个参数是监听的回调参数
回调里常用的两个参数,(一,二)=>{
第一个参数是新值,第二个参数是旧值
其实还有第三个参数是个函数清除副作用
}
第3个参数是一些配置opt
immediate:是否在页面进入的时候开始监听,布尔值
deep:深度监听,布尔值
flush:有三个值,pre post sync 默认第一个渲染前,渲染后,立即同步
普通使用方法
// 引入
import { ref, watch } from 'vue'
let count = ref(1)
watch(count, (newValue, oldValue) => {
console.log(`新值:${newValue}`)
console.log(`旧值:${oldValue}`)
})
奇怪的使用方法
这个方法可以用来监听父传子
watch(
() => num,
(newValue, oldValue) => {
}
)
其他配置使用
深度监听
watch(
address,
(newValue, oldValue) => {
},
{
deep: true
}
)
监听多个
watch(
[a, b],
([newA, newB], [oldA, oldB]) => {
回来的也是数组
}
)
立即执行
watch(
count,
(newValue, oldValue) => {
},
{
immediate: true
}
)
回调的时机
watch(
name,
(newValue, oldValue) => {
},
{
flush: 'post'
}
)