VUE framework Vue3 uses the watch method to implement delayed display------VUE framework

<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>

<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,watch} from "vue";

export default function(name){

    let newName = ref(name.value);

    watch(name,(newValue) => {

        // Listening properties

        setTimeout(() => {

            newName.value = newValue;

        },1000);

    });

    return newName;

}

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

import {ref} from "vue";

export default function(){

    let name = ref("");

    return name;

}