Vue3中watchEffect、watchPostEffect、watchSyncEffect的区别。一文搞懂,非常细致,没有废话。

 共同点:会立即运行一个函数

一、 watchEffect(函数,对象)

1. 函数体内用到的值(依赖项)发生变化就会执行,与watch不同的是不需要传入监听的值,函数体收到的参数也不同
2. 传入的函数接收一个参数,也是一个函数,该函数会比传入的函数先执行

3. 第二个参数是一个配置对象

可选值:

  • immediate:在监听创建时立即触发回调,第一次调用时旧值是undefined
  • deep:如果监听的值是对象,强制使用深度遍历,一遍在深层级变更时触发回调
  • flush:调整回调函数的刷新时机:

'pre' :在组件更新更新前运行,默认为'pre'

'post':在组件更新更新后运行

'sync':强制效果始终同步触发。然而,这是低效的,应该很少需要。

  • onTrack / onTrigger:调试监听的依赖

onTrack(e) {
   // 当监听的值被追踪为依赖时触发,有几个值就会执行几次

   debugger

},

onTrigger(e) {
   // 当监听的值被更改时触发,执行顺序:onTrigger>onInvalidate>函数

    debugger

}

let temp = ref(10);
let height = ref(10);

watchEffect(onInvalidate=>{
   console.log("监听执行:",temp.value,height.value);
   onInvalidate(()=>{
      console.log("onInvalidate先执行");
   })
},{
   onTrack(e) {
    // 当监听的值被追踪为依赖时触发,有几个值就会执行几次
    console.log("onTrack");
  },
  onTrigger(e) {
    // 当监听的值被更改时触发,执行顺序:onTrigger>onInvalidate>函数
    console.log("onTrigger");
  }
})

二、watchPostEffect(函数,对象)

作用:watchEffect() 使用 flush: 'post' 选项时的作用一致

执行顺序:onTrigger>onInvalidate>函数

watchPostEffect(onInvalidate=>{
   console.log("监听后执行:",temp.value,height.value);
   onInvalidate(()=>{
      console.log("onInvalidate后执行");
   })
},{...})

三、watchSyncEffect(函数,对象)

作用:watchEffect() 使用 flush: 'sync' 选项时的作用一致

执行顺序:onTrigger>onInvalidate>函数

watchSyncEffect(onInvalidate=>{
   console.log("监听同步执行:",temp.value,height.value);
   onInvalidate(()=>{
      console.log("onInvalidate同步执行");
   })
},{...})

  • 6
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
Vue 3watchEffectwatchPostEffect是用于追踪响应式对象属性和更新后对象的两个函数。watchEffect用来监听一个响应式对象的属性,并在属性发生变化时执行回调函数。而watchPostEffect则是在Vue更新完DOM后再执行回调函数。 具体来说,watchEffect会立即执行一次回调函数,并在回调函数访问响应式对象的属性。当属性发生变化时,回调函数会被重新执行。这样可以轻松追踪到属性的变化。 而watchPostEffect则是在Vue更新完DOM后,即在下一轮的微任务执行回调函数。这样可以确保回调函数执行时,DOM已经更新完成。这在某些情况下可能是有用的,比如需要在DOM更新后执行一些与DOM相关的操作。 总结来说,watchEffect会立即执行回调函数并追踪响应式对象的属性变化,而watchPostEffect会在DOM更新后执行回调函数。这两个函数在使用上可以根据具体需求选择使用。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [Vue3 watchwatchEffect以及watchPostEffect用法](https://blog.csdn.net/huichao199175/article/details/130762369)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [go语言恶意代码检测系统-对接前端可视化与算法检测部分](https://download.csdn.net/download/liufang_imei/88222624)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值