• 技术文章 >web前端 >Vue.js

    一文了解Vue3中的watchEffect,聊聊其应用场景!

    青灯夜游青灯夜游2022-05-06 18:56:26转载863
    本篇文章带大家了解一下Vue3中的watchEffect,介绍一下它的副作用,并聊聊它可以做什么事情,希望对大家有所帮助!

    watchEffect,它立即执行传入的一个函数,同时响应式追踪其依赖,并在其依赖变更时重新运行该函数。(学习视频分享:vue视频教程

    换句话说:watchEffect相当于将watch 的依赖源和回调函数合并,当任何你有用到的响应式依赖更新时,该回调函数便会重新执行。不同于 watchwatchEffect 的回调函数会被立即执行(即 { immediate: true }

    此文主要讲述怎样利用清除副作用使我们的代码更加优雅~

    watchEffect的副作用

    什么是副作用(side effect),简单的说副作用就是执行某种操作,如对外部可变数据或变量的修改,外部接口的调用等。watchEffect的回调函数就是一个副作用函数,因为我们使用watchEffect就是侦听到依赖的变化后执行某些操作。

    当执行副作用函数时,它势必会对系统带来一些影响,如在副作用函数里执行了一个定时器setInterval,因此我们必须处理副作用。Vue3watchEffect侦听副作用传入的函数可以接收一个 onInvalidate 函数作为入参,用来注册清理失效时的回调。当以下情况发生时,这个失效回调会被触发:

    import { watchEffect, ref } from 'vue'
    
    const count = ref(0)
    watchEffect((onInvalidate) => {
      console.log(count.value)
      onInvalidate(() => {
        console.log('执行了onInvalidate')
      })
    })
    
    setTimeout(()=> {
      count.value++
    }, 1000)

    上述代码打印的顺序为: 0 -> 执行了onInvalidate,最后执行 -> 1

    分析:初始化时先打印count的值0, 然后由于定时器把count的值更新为1, 此时副作用即将重新执行,因此onInvalidate的回调函数会被触发,打印执行了onInvalidate,然后执行了副作用函数,打印count的值1

    import { watchEffect, ref } from 'vue'
    
    const count = ref(0)
    const stop = watchEffect((onInvalidate) => {
      console.log(count.value)
      onInvalidate(() => {
        console.log('执行了onInvalidate')
      })
    })
    
    setTimeout(()=> {
      stop()
    }, 1000)

    上述代码:当我们显示执行stop函数停止侦听,此时也会触发onInvalidate的回调函数。同样,watchEffect所在的组件被卸载时会隐式调用stop函数停止侦听,故也能触发onInvalidate的回调函数。

    watchEffect的应用

    利用watchEffect的非惰性执行,以及传入的onInvalidate 函数,我们可以做什么事情了?

    场景一:平时我们定义一个定时器,或者监听某个事件,我们需要在mounted生命周期钩子函数内定义或者注册,然后组件销毁之前在beforeUnmount钩子函数里清除定时器或取消监听。这样做我们的逻辑被分散在两个生命周期,不利于维护和阅读。

    如果我利用watchEffect,创造和销毁逻辑放在了一起,此时代码更加优雅易读~

    // 定时器注册和销毁
    watchEffect((onInvalidate) => {
      const timer = setInterval(()=> {
        // ...
      }, 1000)
      onInvalidate(() => clearInterval(timer))
    })
    
    const handleClick = () => {
     // ...
    }
    // dom的监听和取消监听
    onMounted(()=>{
      watchEffect((onInvalidate) => {
        document.querySelector('.btn').addEventListener('click', handleClick, false)
        onInvalidate(() => document.querySelector('.btn').removeEventListener('click', handleClick))
      })
    })

    场景二:利用watchEffect作一个防抖节流(如取消请求)

    const id = ref(13)
    watchEffect(onInvalidate => {
       // 异步请求
      const token = performAsyncOperation(id.value)
      // 如果id频繁改变,会触发失效函数,取消之前的接口请求
      onInvalidate(() => {
        // id has changed or watcher is stopped.
        // invalidate previously pending async operation
        token.cancel()
      })
    })

    ......

    当然watchEffect还能做很多事情,比如打开一个修改的modal弹窗,如果检测到id变化,我们可以在onInvalidate函数内,重置初始参数...这里只是一个抛砖引玉的作用,望大家多多发掘~

    (学习视频分享:web前端开发编程基础视频

    以上就是一文了解Vue3中的watchEffect,聊聊其应用场景!的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除
    专题推荐:Vue vue.js vue3
    上一篇:5 款适合国内使用的 Vue 移动端 UI 组件库 下一篇:通过9个Vue3 组件库,看看聊前端的流行趋势!
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• vue3+vite2+ts4搭建项目环境规范• vue3为什么快?vue3的效率提升主要在哪方面?• angular、react和vue有什么区别• 手把手教你使用Vue3实现图片散落效果• 深入浅析vue3+vite中怎么使用svg图标• 收藏这些vue项目性能优化方式,总有一天能用上!
    1/1

    PHP中文网