[RFC] Add pause/resume function to ReactiveEffect

[Alfred-Skyblue]

Start Date: 2023-11-14
Target Major Version: 3.x
Implementation PR: vuejs/core#9651

Summary

The proposal recommends adding pause/resume methods to RenderEffect for controlling the pause and resume of effects.

• The pause method is used to pause the execution of a ReactiveEffect.
• The resume method is used to resume the execution of a ReactiveEffect.
• EffectScope has been extended with pause and resume methods, which can be used to pause/resume the execution of all ReactiveEffects within the EffectScope.
• Add the lazy attribute to keep-alive so that, during the activated and deactivated phases, you can control the pause and resume of the EffectScope for the component instance. Users have the autonomy to control the invocation of pause/resume actions during the keep-alive lifecycle.

Motivation

When the keep-alive is in a deactivated state, if the effect within the component depends on an external reactive variable, unnecessary updates occur when this variable is updated. In this RFC, we address this issue by pausing the effect to prevent these unnecessary updates.

relate: vuejs/core#5386

Basic example

• effect

import { effect, ref } from 'vue'

const msg = ref('hello world')

const runner = effect(() => {
  console.log('changed', msg.value)
})

msg.value = 'hello vue3' // changed hello vue3

runner.pause()

msg.value = 'hello vue3.1' // effect not run

runner.resume(true) // effect run => changed hello vue3.1

• EffectScope

import { effectScope, ref, computed, watchEffect } from 'vue'
const scope = effectScope()

const counter = ref(0)

scope.run(() => {
  const doubled = computed(() => counter.value * 2)

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

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

counter.value++ // 2 Count: 2

scope.pause()

counter.value++ // scope paused, no effect

scope.resume(true) // 4 Count: 4

• Component

<script lang="ts" setup>
import { getCurrentInstance, onMounted, onUnmounted, ref, watch } from 'vue'
const vm = getCurrentInstance()
const msg = ref('Hello World!')

watch(msg, () => {
  console.log('changed')
})

onMounted(() => {
  const ob = new IntersectionObserver(
    ([{ isIntersecting }]) => {
      if (isIntersecting) {
        // When the root element enters the viewport, resume the `EffectScope`
        vm.scope.resume(true)
      } else {
        // Pause the `EffectScope` when the root element leaves the viewport
        vm.scope.pause()
      }
    }
  )
  ob.observe(vm.proxy!.$el)

  onUnmounted(() => ob.disconnect())
})
</script>

<template>
  <div>
    {{ msg }}
  </div>
</template>

• KeepAlive

import { ref, shallowRef, h, createApp, KeepAlive} from 'vue'

    const msg = ref('hello')
    const current = shallowRef(A)

    const renderA = () => {
      console.log('renderA')
      return 'A'
    }

    const A = {
      render: () => h('div', [renderA(), msg.value])
    }
    const B = {
      render: () => 'B'
    }

    const app = createApp({
      setup() {
        return () => {
          return [h(KeepAlive, { lazy: true }, h(current.value))]
        }
      }
    })

    app.mount(root)

    msg.value = 'world' // render A

    current.value = B // toggle to B

    msg.value = 'Hello world' // renderA is not triggered

Detailed design

• The pause method is used to pause the execution of a ReactiveEffect. If an effect is triggered during the pause process, the effect will be placed into the pausedQueueEffects.
• The resume method is used to resume the execution of a ReactiveEffect. This method takes a boolean parameter. If the resume method is called with true, and the current effect exists in pausedQueueEffects, immediately trigger the effect once.

import { effect, ref } from 'vue'

const msg = ref('hello world')

const fn = () => {}
const runner1 = effect(fn)
runner1.pause() // effect pause
runner1.resume() // resuming an effect does not re-execute the `run` method that was paused

const runner2 = effect(fn)
runner2.pause() // effect pause
runner2.resume(true) // passing `true` will immediately execute the `run` method that was paused when resuming

Unresolved questions

• If there is behavior in watch similar to that of a counter, it may result in counting errors.
• Naming Issue

Welcome to discuss.