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>

<テンプレート>

    <input type="text" v-model="name"/>

    <br>

    { { 新しい名前 }}

</テンプレート>

<スクリプト>

「./hooks/inputName.js」から inputName をインポートします。

"./hooks/getName.js" から getName をインポートします。

デフォルトのエクスポート {

    名前：「アプリ」、

    設定（）{

        名前 = inputName(); にします。

        let newName = getName(name);

        {名前,新しい名前}を返します;

    }

}

</script>

<スタイル>

</スタイル>

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

「vue」から {ref,watch} をインポートします。

デフォルト関数をエクスポート(名前){

    newName = ref(name.value); とします。

    watch(name,(newValue) => {

        // リスニングのプロパティ

        setTimeout(() => {

            新しい名前.値 = 新しい値;

        },1000);

    });

    新しい名前を返します。

}

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

「vue」から {ref} をインポートします。

デフォルト関数をエクスポート(){

    名前 = ref(""); とします。

    名前を返します。

}