vue3 中文本编译器自动保存功能实现

要实现自动保存功能. 只要 watch 监听就行了. 不过, 不能打一个字就保存一个吧, 这样后端上传数据也太频繁了吧, 我们可以用一个我之前说过的防抖函数debounce 去处理, 只要打字停下来1秒或3秒, 就开始保存数据. 另外, 组件的复用, 可以用一个 key 来做数据清空.

一、自动保存功能的实现

<template>
  <textarea v-model="textContent"></textarea>
</template>

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

const debounce = (func: any, wait: number) => {
  let timeout: any;
  return function (this: any) {
    const context = this;
    const args = arguments;
    if (timeout) clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(context, args), wait);
  };
}

// 模拟保存数据的函数，实际应用中这里可替换为向后端发送请求保存数据等真实操作
const saveData = (content) => {
  console.log('保存数据:', content);
};

const textContent = ref('');

// 使用 debounce 对保存函数进行防抖处理，设置延迟 3 秒执行保存（可按需调整时间）
const debouncedSave = debounce((newVal) => {
  saveData(newVal);
}, 3000);

// 使用 watch 监听文本内容变化，调用防抖后的保存函数
watch(textContent, debouncedSave);
</script>

二、组件复用的数据清空问题

这个场景可能用的比较少, 这里只提供一个思路. 比如上面的组件, 如果封装成一个组件, 因为用了抖函数和自动保存, 其实并不能把数据做双方传送到上级组件, 这样会打一个字就卡一下. 但是这个时候, 这个组件, 在别的地方, 可能有调用. 这个时候, 就用 key 去做组件的刷新, 可以手动的设置为 0, 下次为 1. 这样的处理方式. 可以处理旧数据.

<ContentText :key="useCallReportStore().templateUpdate === true? 0 : 1" :table-data="useReportStore().contents" />

比如这样, 我在做入数据 useReportStore().contents 时, useCallReportStore().templateUpdate 做一个 取反操作, 这个组件就强制刷新.