VUE框架Vue3使用watch的方法实现延迟显示------VUE框架

<template>
    <input type="text" v-model="name"/>
    <br>
    {{ newName }}
</template>
 
<script>
import inputName from "./hooks/inputName.js";
import getName from "./hooks/getName.js";
export default {
    name : "App",
    setup(){
        let name = inputName();
        let newName = getName(name);
        return {name,newName};
    }
}
</script>
 
<style>
 
</style>

import {ref,watch} from "vue";
export default function(name){
    let newName = ref(name.value);
    watch(name,(newValue) => {
        // 侦听属性
        setTimeout(() => {
            newName.value = newValue;
        },1000);
    });
    return newName;
}

import {ref} from "vue";
export default function(){
    let name = ref("");
    return name;
}