美文网首页
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

    effectScope 官方解释:创建一个 effect 作用域,可以捕获其中所创建的响应式副作用 (即计算属性和...

  • 【vue3源码】三、effectScope源码解析

    前言 参考代码版本:vue 3.2.37 官方文档:https://vuejs.org/[https://vuej...

  • effectScope 的主要用途

    主要用途是便于回收监听器(副作用/effects),防止内存泄漏.一般情况, 在组件的setup中声明的变量和监听...

  • 在官网首页如何打开指南的pdf

    vue版本:"vue": "^2.6.14" vue-pdf版本:"vue-pdf": "^4.2.0"、"vue...

  • 【基础】Vue安装

    Vue安装 Vue官网:http://unpkg.com/vue 引入vue Vue数据渲染html {...

  • vue基础知识

    new Vue() 创建 Vue 实例,其中 Vue.components() 也可以创建 Vue 实例。 Vue...

  • Vue学习总结(2019.7.31-8.4)

    Vue学习总结 目录 vue基础知识(1-13)vue 引入,实例化vue 数据 & 方法vue 绑定(:)vue...

  • vue 组件和路由

    === Vue组件Vue组件的创建vue.extend结合vue.component创建vue.component...

  • Vue

    Vue框架 一、Vue基础 添加Vue到网页(无需保存到本地) Vue生命周期 二、Vue 实例 创建Vue实例:...

  • Vue应用

    Vue项目 Vue结构 Vue项目打包与发布 Vue语法二 Vue网络请求 Vue路由 动态路由 编程式路由导航

网友评论

      本文标题:VUE effectScope()、getCurrentScop

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