Vue3 の参照と参照の詳細

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vueは基本的に--refsを使用してコンポーネントまたは要素のインスタンスを取得します
  • Vue3 の ref toRef と toRefs の違いを理解する方法
  • vue3でrefを使用して要素を取得する方法

<<:  フォームのチェックボックスとラジオボタンのテキストを揃えるコード

>>:  Docker コンテナに TensorRT をインストールする際の問題

推薦する

mysql 5.7.5 m15 winx64.zip インストール チュートリアル

win7 64 ビットで mysql-5.7.5-m15-winx64 をインストールして構成する方...

リモートDockerを使用した統合テスト環境の構築手順

需要背景チームには統合テストが必要であり、そのためには、mysql や rabbitmq などのミド...

WeChatアプレットはユーザーログインモジュールサーバーの構築を実装します

サーバーの構築には node.js を選択しました。まだインストールしていない方は、私の他の nod...

暗号化における https の Apache 展開の概要

目次目的実験環境実験原理実験手順1. 独立したCAを生成する2. サーバーの秘密鍵と署名要求ファイル...

Linux運用保守ツールSupervisor(プロセス管理ツール)のインストールと使用

1. はじめにSupervisor は Python で開発された汎用プロセス管理プログラムです。通...

Docker デプロイメント Consul 構成プロセスの分析

コマンドを実行docker run -d --name consul -p 8500:8500 co...

nginx を最適化する 6 つの方法

1. Nginxの同時実行性を最適化する [root@proxy ~]# ab -n 2000 -c...

Unicode の一般的な文字の概要

初期のコンピューターのほとんどは ASCII 文字しか使用できませんでしたが、その後、主要な西洋のア...

MySQLレジストリをクリアする方法

具体的な方法: 1. [ win+r ] を押して実行ウィンドウを開き、「regedit」と入力して...

Docker コンテナのマウントディレクトリ操作の表示

Dockerコンテナのマウントディレクトリ情報のみを表示する docker 検査 --format ...

Vue ライフサイクルの紹介とフック関数の詳細な説明

目次Vueライフサイクルの紹介とフック機能VUEライフサイクルフックVue ライフサイクルの紹介作成...

HTML は、Web ページの作成者が学習して習得しなければならないものです。

HTML を学ぶメリットは何ですか? 1: ウェブサイトやブログのウェブ構造を簡単に変更できます。...

VMware 仮想マシンのインストール Apple Mac OS の超詳細なチュートリアル

目次要約する仕事の都合で Apple の Mac OS に対応するソフトウェアをインストールする必要...

JSインターセプト文字列の3つの方法の詳細な説明

JS には、文字列をインターセプトするための 3 つのメソッド、 slice() 、 substri...

Linux ダイナミックライブラリの生成と使用ガイドの詳細な説明

Linux での動的ライブラリ ファイルのファイル名は libxxx.so のようになります。ここで...