美文网首页
VUE effectScope()、getCurrentScop

VUE effectScope()、getCurrentScop

作者: 如果俞天阳会飞 | 来源:发表于2023-01-03 14:29 被阅读0次

    effectScope

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

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

     const effect = effectScope();
      effect.run(() => {
        watch(
          () => state.currentIndex,
          () => {
            fetchData();
          }
        );
        watch<string>(
          () => route.query.id as string,
          (news: string) => {
            if (news) {
              columnList.forEach((item, index) => {
                if (String(item.id) === news) {
                  state.currentIndex = index;
                }
              });
            }
          }
        );
      });
    effect .stop() //停止监听
    

    getCurrentScope()

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

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

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

    onScopeDispose()

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

     onScopeDispose(() => {
        console.log('已停止所有侦听');
      });
    

    相关文章

      网友评论

          本文标题:VUE effectScope()、getCurrentScop

          本文链接:https://www.haomeiwen.com/subject/jcdlcdtx.html