vue3怎么用定时器监听数据，数据变化触发只执行一次定时器任务并停止定时器，下次触发再执行一次。另外vue3怎么监听数据变化并把原来的所有数组或对象去替换掉

Question

vue3怎么用定时器监听数据，数据变化触发只执行一次定时器任务并停止定时器，下次触发再执行一次。另外vue3怎么监听数据变化并把原来的所有数组或对象全部替换成其他数组或对象。

Answer 1

使用reactive
下边是个简单的例子

<template>
    <div>
        <div>
            数据：{{ dataList.data.name }}
        </div>
        <el-button type="primary" @click="btnFn()">修改数据</el-button>
    </div>
</template>

<script lang="ts" setup>
    import {
        reactive,
    } from 'vue'
    const dataList = reactive({
        data: {
            name: '张三',
        }
    });
    const btnFn = async () => {
        dataList.data = {
            name: '李四',
        };
        console.log(dataList)
    }
</script>