VUE effectScope()、getCurrentScope()、onScopeDispose()简介

effectScope()

官方解释：创建一个 effect 作用域，可以捕获其中所创建的响应式副作用 (即计算属性和侦听器)，这样捕获到的副作用可以一起处理。

个人理解：叫它 侦听管家 更形象。 通俗的说，它可以把计算属性、监听器放在一个函数内管理，然后统一停止监听。

代码示例：

// 定义侦听管家实例
const scope = effectScope()

scope.run(() => {
  // 把计算属性、监听事件放置在这里
  const doubled = computed(() => counter.value * 2)

  watch(doubled, () => console.log(doubled.value))

  watchEffect(() => console.log('Count: ', doubled.value))
})

// 处理掉当前作用域内的所有 effect
scope.stop() //停止监听

 

 

getCurrentScope()

说明：获取当前侦听管家实例。

比如一个页面中存在多个管家，而我们不想一个个取消每个管家的监听，可以通过此方式批量取消监听。

代码示例：

const allScope = getCurrentScope()
allScope.stop() // 取消所有侦听管家监听

 

 

onScopeDispose()

说明：这是一个回调事件。当执行getCurrentScope().stop()时，或者组件注销时触发。

原型：

onScopeDispose(()=>{
        // to do...
})

 

示例说明这三者的应用：

<script setup>
    import {
        ref,
        computed,
        watch,
        watchEffect,
        effectScope,
        getCurrentScope,
        onScopeDispose
    } from 'vue'

    const counter = ref(2)

    // 定义第一个侦听管家
    const scope = effectScope()
    scope.run(() => {
        const doubled = computed(() => counter.value * 2)
        watch(doubled, () => console.log(doubled.value))
        watchEffect(() => console.log('Count: ', doubled.value))
    })
    //scope.stop()  // 调用它，可以取消scope内的侦听。执行这个不会触发onScopeDispose事件

    //  定义第二个侦听管家
    const scope2 = effectScope()
    scope2.run(() => {
        const doubled2 = computed(() => counter.value * 3)
        watch(doubled2, () => console.log(doubled2.value))
        watchEffect(() => console.log('Count: ', doubled2.value))
    })
    //scope2.stop() // 调用它，可以取消scope2内的侦听。执行这个不会触发onScopeDispose事件

    // 获取当前侦听实例
    const allScope = getCurrentScope()
    // 执行 allScope.stop()时会触发 onScopeDispose 事件
    // 当前页面或组件注销时会触发 onScopeDispose 事件
    onScopeDispose(() => {
        console.log('已停止所有侦听');
        // to do...
    })
  
    // 5秒后停止所有侦听，此时会触发 onScopeDispose 事件
    setTimeout(() => {
        allScope.stop()
    }, 5000)
</script>