vue3.5新特性之pause和resume方法

新增pause和resume方法

pause和resume的作用

pause和resume方法主要用于控制响应式副作用（如watchEffect）的执行。pause方法可以暂停副作用的执行，而resume方法则可以恢复副作用的执行。这在一些场景下非常有用，例如当组件处于非活动状态或者某些条件不满足时，暂停一些不必要的计算或操作，等到条件合适时再恢复。

应用场景

事例一：根据组件状态暂停和恢复watchEffect

<template>
  <div>
    <button @click="toggleComponentActive">Toggle Component Active</button>
    <div v-if="isComponentActive">{{ message }}</div>
  </div>
</template>

<script setup>
import { ref, watchEffect } from 'vue';

const isComponentActive = ref(true);
const message = ref('Initial message');

// 创建watchEffect实例
const watcher = watchEffect(() => {
  if (isComponentActive.value) {
    message.value = 'Component is active and watchEffect is running';
  }
});

const toggleComponentActive = () => {
  if (isComponentActive.value) {
    isComponentActive.value = false;
    watcher.pause();
    message.value = 'Component is inactive, watchEffect paused';
  } else {
    isComponentActive.value = true;
    watcher.resume();
    message.value = 'Component is active again, watchEffect resumed';
  }
};
</script>

在这个例子中：

• 首先创建了一个watchEffect，它会根据isComponentActive的值更新message。
• 当点击toggleComponentActive按钮使isComponentActive变为false时，调用watcher.pause()暂停watchEffect，此时message的值会相应改变，并且watchEffect中的副作用函数不会再执行。
• 当再次点击按钮使isComponentActive变为true时，调用watcher.resume()恢复watchEffect的执行，message的值也会再次更新。

事例二：根据数据条件暂停和恢复watchEffect

<template>
  <div>
    <button @click="toggleDataProcessing">Toggle Data Processing</button>
    <div>{{ processedData }}</div>
  </div>
</template>

<script setup>
import { ref, watchEffect } from 'vue';

const shouldProcessData = ref(true);
const data = ref(0);
const processedData = ref('Data not processed yet');

const watcher = watchEffect(() => {
  if (shouldProcessData.value) {
    processedData.value = `Processed data: ${data.value * 2}`;
    data.value++;
  }
});

const toggleDataProcessing = () => {
  if (shouldProcessData.value) {
    shouldProcessData.value = false;
    watcher.pause();
    processedData.value = 'Data processing paused';
  } else {
    shouldProcessData.value = true;
    watcher.resume();
    processedData.value = 'Data processing resumed';
  }
};
</script>

在这个例子中：

• watchEffect会根据shouldProcessData的值来处理data并更新processedData。
• 点击toggleDataProcessing按钮改变shouldProcessData的值，当为false时，调用watcher.pause()暂停watchEffect，数据处理停止。当shouldProcessData再次变为true时，调用watcher.resume()恢复数据处理。