Vue响应式进阶常用API之effectScope、getCurrentScope、onScopeDispose学习

Alan-Xia2024-09-09 21:44

effectScope

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

具体解释：就是创建一个effct作用域，当需要的时候可以调用里面的监听、计算熟悉等，不需要的时候可以清空

getCurrentScope

获取当前组件是否还有活动的effect，可以用在onBeforeUnmount、onUnmounted等钩子中

onScopeDispose

当前页面或组件注销时会触发 onScopeDispose 事件

示例:

javascript 复制代码

<template>
  <h2>进阶练习</h2>
  <div>
    <div>姓名: {{ data.name }}</div>
    <div>年龄: {{ data.age }}</div>
    <div>个人信息：{{ data.info }}</div>
    <button @click="handleChange(data.age)">修改信息</button>
  </div>
</template>

<script setup>
import { reactive, effectScope, watch, getCurrentScope, onUnmounted, onScopeDispose } from 'vue'
const baseObj = {
  name: 'Alan',
  age: 18,
  job: '码农',
  info: ''
}
const data = reactive(baseObj)

const effect = effectScope()
// 获取当前effect实例, 当前组件是否还有活动的effect，可以用在onBeforeUnmount、onUnmounted等钩子中
const allScope = getCurrentScope()

effect.run(() => {
  watch(
    () => data.age,
    () => {
      data.info = `${data.name}现在${data.age}岁了`
    }
  )
})

console.log('当前组件是否有活动effect', allScope.active)
onUnmounted(() => {
  // 停止当前作用域内所有的effect
  allScope.stop()
})
// 当前页面或组件注销时会触发 onScopeDispose 事件
onScopeDispose(() => {
  // allScope.stop()
  console.log('当前组件注销了, 已停止effect所有侦听')
})
const handleChange = (age) => {
  if (age >= 23) {
    // 处理掉当前作用域内的所有effect
    effect.stop()
  } else {
    data.age += 1
  }
}
</script>