Vue3 の参照と参照の詳細

エディターは、Vue3のデータの関連する問題も共有します。次のような例を見てみましょう。

Vue.createApp({
    テンプレート: `<div>{{ nameObj.name }}</div>`,
    設定（） {
        const { リアクティブ } = Vue
        const nameObj = reactive({name:'lilei',age:18})
        
        タイムアウトを設定する(() => {
            nameObj.name = 'ハンメイメイ'
        },2000)
        戻る {
            名前オブジェクト
        }
    }
}).mount('#root')

この時点で、 es6の構造化代入に関する内容を思い浮かべることができます。上記の例で、結果を構造化代入することでnameObjの内部nameを取得し、 nameを直接返すことはできるでしょうか?つまり、次のようにコードを書くのです

Vue.createApp({
    テンプレート: `<div>{{ name }}</div>`,
    設定（） {
        const { リアクティブ、toRefs } = Vue
        const nameObj = reactive({name:'lilei',age:18})
                {名前} = nameObjとします
        タイムアウトを設定する(() => {
            name.value = 'ハンメイメイ'
        },2000)
        戻る {
            名前
        }
    }
}).mount('#root')

実際に操作してみると、ページ上のコンテンツがhanmeimeiならないことが分かりました。このとき、 Vue3で別のコンテンツを導入する必要があります。データとページの応答性を実現するために、コードを修正する必要があります。

Vue.createApp({
    テンプレート: `<div>{{ name }}</div>`,
    設定（） {
        const { リアクティブ、toRefs } = Vue
        const nameObj = reactive({name:'lilei',age:18})
        { name } = toRefs(nameObj) とします。
        タイムアウトを設定する(() => {
            name.value = 'ハンメイメイ'
        },2000)
        戻る {
            名前
        }
    }
}).mount('#root')

同様に、 toRefs toRefと非常によく似ています。コード例は次のとおりです。

Vue.createApp({
    テンプレート: `<div>{{ age }}</div>`,
    設定（） {
        const { リアクティブ、toRef } = Vue
        const nameObj = リアクティブ({name:'lilei'})
        age = toRef(nameObj,'age') とします。
        タイムアウトを設定する(() => {
            age.value = 'ハンメイメイ'
        },2000)
        戻る {
            年
        }
    }
}).mount('#root')

Vue3 の Refs と Ref の詳細に関するこの記事はこれで終わりです。Vue3 の Refs と Ref に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: