watch的话应该大家都比较熟了
在vue2中就是一个典型的监听属性
那么 在vue3项目中我们先来看看它的用法
基础用法
//声明一个变量作为监听对象
const data = ref(23);
//给data设置一个监听属性 当改变时触发方法 打印出新的value 和 以前的value
watch(data, (val, bval) =>{
console.log(val,bval);
})
//1.5秒后修改data的值 用于触发监听事件
setTimeout(()=>{
data.value = 66
}, 1500)
//返回响应式数据
return {
data
}
成功打印出了之前的值和修改后的值
那如果是个引入变量呢
//声明一个监听对象
const datas = reactive({
map:{
name:100
}
})
//监听datas中的map属性 下面的deep设置表示开启深度监听 一般对象数组就要这样设置
watch(
() => datas.map,
(val, bval) =>{
console.log(val,bval);
},{
deep: true
}
)
//1.5秒后修改datas中map中的name
setTimeout(()=>{
datas.map.name = 300
}, 1500)
return {
datas
}
返回响应式数据
也算是监听到了 但显然修改前和修改后的值都变成了修改后的
其实我觉得watch一直存在监听复杂结构数据不准确的问题
那么我们再来看看watchEffect
//设置一个用于监听的变量
const datas = reactive({
map:{
name:100
}
})
//设置监听watchEffect
watchEffect(()=>{
console.log(datas.map.name);
})
//1.5秒后修改datas中的map中的name
setTimeout(()=>{
datas.map.name = 300
}, 1500)
//返回响应式变量
return {
datas
}
其实每次修改时都会触发 但只会看到修改后的值
不过好处在于 你不需要特意声明要监听的属性
在页面初始化时watchEffect的回调就会执行一次 只要在它回调中有用到的属性都会被监听 个人觉得就比watch灵活很多了 所以总结如下