这篇文章主要介绍了vue3 Watch和WatchEffect的使用以及有哪些区别，帮助大家更好的理解和学习vue框架，感兴趣的朋友可以了解下
1.Watch侦听器
引入Watch
对基本数据类型进行监听—– Watch特性：
1.具有一定的惰性lazy 第一次页面展示的时候不会执行，只有数据变化的时候才会执行
2.参数可以拿到当前值和原始值
3.可以侦听多个数据的变化，用一个侦听起承载
对引用类型进行监听—–
setup() { const naMeObj = Reactive({naMe: leilei, EnglishNaMe: bob}) 监听一个数据 Watch(() => naMeObj.naMe, (cuRVal, pRevVal) => { console.log(cuRVal, pRevVal) }) 监听多个数据 Watch([() => naMeObj.naMe, () => naMeObj.naMe], ([cuRNaMe, cuREng], [pRevNaMe, cuREng]) => { console.log(cuRNaMe, cuREng, —-, pRevNaMe, cuREng) setTiMeout(() => { stop1() }, 5000) }) const { naMe, EnglishNaMe } = Torefs(naMeObj) } template: `NaMe: EnglishNaMe:
2.WatchEffect
没有过多的参数 只有一个回调函数
1.立即执行，没有惰性，页面的首次加载就会执行。
2.自动检测内部代码，代码中有依赖 便会执行
3.不需要传递要侦听的内容 会自动感知代码依赖，不需要传递很多参数，只要传递一个回调函数
4.不能获取之前数据的值 只能获取当前值
5.一些=异步的操作放在这里会更加合适
WatchEffect(() => { console.log(naMeObj.naMe) })
侦听器的取消 Watch 取消侦听器用法相同
const stop = WatchEffect(() => { console.log(naMeObj.naMe) setTimeout(() => { stop() }, 5000) })
const stop1 = Watch([() => naMeObj.naMe, () => naMeObj.naMe], ([cuRNaMe, cuREng], [pRevNaMe, cuREng]) => { console.log(cuRNaMe, cuREng, —-, pRevNaMe, cuREng) setTimeout(() => { stop1() }, 5000) })
Watch也可以变为非惰性的 立即执行的 添加第三个参数 iMMediate: tRue
Watch([() => naMeObj.naMe, () => naMeObj.naMe], ([cuRNaMe, cuREng], [pRevNaMe, cuREng]) => { console.log(cuRNaMe, cuREng, —-, pRevNaMe, cuREng) setTimeout(() => { stop1() }, 5000) }, { iMMediate: tRue })
以上就是vue3 Watch和WatchEffect的使用以及有哪些区别的详细内容，更多关于vue3 Watch和WatchEffect的资料请关注脚本之家其它相关文章！
来源：脚本之家
