本文主要是介绍vue3的watchEffect和watch其他参数，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
目录
1、watchEffect基本使用
2、watch 与 watchEffect的异同
3、watch其他参数使用
1、watchEffect基本使用
1 回调函数立即调用
2 回调函数依赖的数据都会被监控
3 深度监控
<template><div><button @click="num++">num++</button></div>
</template><script setup>
import { watchEffect, ref, reactive } from 'vue'
// watchEffect监控数据
const num =ref(10)
const obj = reactive({name: 'zs',age: 18,boyFriend: {name: 'lisi',age: 19}
})watchEffect(() => {console.log(num.value);console.log(obj.boyFriend.name);
})</script><style lang="scss" scoped></style>2、watch 与 watchEffect的异同
1、 相同点 ：都可以对数据进行侦听
2、 不同点 ：watchEffect回调函数立即调用、对回调函数依赖的数据隐式监控、默认深度监控
watch 和 watchEffect 都能监听响应式数据的变化，不同的是它们监听数据变化的方式不同。
watch 会明确监听某一个响应数据，而 watchEffect 则是隐式的监听回调函数中响应数据。 watch 在响应数据初始化时是不会执行回调函数的， watchEffect在响应数据初始化时就会立即执行回调函数。
3、watch其他参数使用
watchPostEffect() 是watchEffect() 使用 flush: 'post' 选项时的别名。
onInvalidate副作用清理函数
执行时机：下一次副作用执行前
<script setup >import {ref, watch} from 'vue'let sum=ref(0)
let qyz=ref(null)
const sumadd=()=>{sum.value++
}//onInvalidate副作用清理函数
//副作用-发网络请求。开启定时器，控制台输出
watch(sum,(newVal,oldval,onInvalidate)=>{ //数据变了才执行//onInvalidate副作用清理函数console.log('青阳子')console.log('DOM节点',qyz.value.innerHTML)onInvalidate(()=>{//执行时机：下一次副作用执行前console.log(222)})
},{flush:'post'//拿到dom更新后的值
})
</script><template>
<div>hello,world</div>
<div><h2 ref="qyz">{{ sum }}</h2></div>
<button @click="sumadd">sum++</button></template><style scoped></style>
这篇关于vue3的watchEffect和watch其他参数的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
