データバインディングとリストデータの表示にはVue3を使用する

1. Vue2との比較

1. Vue3の新機能

データレスポンスの再実装（ ES6 proxy Es5のObject.definePropertyを置き換えます）
ソースコードはtsを使用して書き直され、型推論が改善されました。
新しい仮想DOMアルゴリズム (より高速、より小さい)
ロジックの再利用とコード編成を改善するcomposition apiを提供します
カスタムレンダラー（ app 、ミニプログラム、ゲーム開発）
Fragment 、テンプレートは複数のルート要素を持つことができます

2. Vue2とVue3の応答原理の比較

Vue2はObject.definePropertyメソッドを使用してレスポンシブデータを実装します

欠点:

オブジェクトプロパティの動的な追加と削除を検出できません
配列の添え字とlengthプロパティの変更を検出できません

解決：

Vue2オブジェクトにプロパティを動的に追加するためのVue.$setを提供します。
Vue.$deleteオブジェクトのプロパティを動的に削除します

3. 配列の変更を検出するために配列メソッドを書き直す

Vue3 proxyを使用してレスポンシブデータを実装します

アドバンテージ：

プロキシオブジェクト属性の動的な追加と削除を検出できます
測定配列の添え字とlength属性の変更を確認できます。

欠点:

es6 proxy 、下位バージョンのブラウザ IE11 をサポートしていません。
IE11をサポートする特別バージョンがリリースされます

上記引用「[Vue2 と Vue3 の比較]」(https://www.cnblogs.com/yaxinwang/p/13800734.html)

4. 直感的な体験

現状、実際の業務ではVue2が主流となっている

Vue3はmounted 、 data 、 methodsが含まれており、すべてsetup（）でラップされています。

2. Vue3 を使用したデータバインディングの例

前回の記事 Vue3 統合 HTTP ライブラリ axios の詳細では、バックグラウンドデータの返却を実現し、フロントページに表示しました (コンソールではありますが) が、これはまだ 90% 程度しか完了していないことを意味します。

次のステップは、バックグラウンドインターフェースからデータを返す方法と、それをページに表示する方法です。

1. refを使用してデータバインディングを実装する

homeも変更する必要があります。結局のところ、ページに表示されるので、コードのHome部分のみを変更する必要があります。具体的なサンプルコードは次のとおりです。

<テンプレート>
  <a-レイアウト>
    <a-layout-sider width="200" style="background: #fff">
      <a-メニュー
          モード="インライン"
          v-model:selectedKeys="selectedKeys2"
          v-model:openKeys="openKeys"
          :style="{ 高さ: '100%', 右境界線: 0 }"
      >
        <a-サブメニューキー="sub1">
          <テンプレート #タイトル>
                <span>
                  <ユーザーによるアウトライン />
                  サブナビ1
                </span>
          </テンプレート>
          <a-menu-item key="1">オプション1</a-menu-item>
          <a-menu-item key="2">オプション2</a-menu-item>
          <a-menu-item key="3">オプション3</a-menu-item>
          <a-menu-item key="4">オプション4</a-menu-item>
        </a-サブメニュー>
        <a-サブメニューキー="sub2">
          <テンプレート #タイトル>
                <span>
                  <ラップトップのアウトライン />
                  サブナビ2
                </span>
          </テンプレート>
          <a-menu-item key="5">オプション5</a-menu-item>
          <a-menu-item key="6">オプション6</a-menu-item>
          <a-menu-item key="7">オプション7</a-menu-item>
          <a-menu-item key="8">オプション8</a-menu-item>
        </a-サブメニュー>
        <a-サブメニューキー="sub3">
          <テンプレート #タイトル>
                <span>
                  <通知の概要 />
                  サブナビ3
                </span>
          </テンプレート>
          <a-menu-item key="9">オプション9</a-menu-item>
          <a-menu-item key="10">オプション10</a-menu-item>
          <a-menu-item key="11">オプション11</a-menu-item>
          <a-menu-item key="12">オプション12</a-menu-item>
        </a-サブメニュー>
      </a-メニュー>
    </a-layout-sider>
    <レイアウトコンテンツ
        :style="{ 背景: '#fff', パディング: '24px', マージン: 0, 最小高さ: '280px' }"
    >
      {{電子書籍}}
      <前>
{{電子書籍}}
      </pre>
    </a-レイアウトコンテンツ>
  </a-レイアウト>
</テンプレート>

<script lang="ts">
'vue' から {defineComponent、onMounted、ref} をインポートします。
'axios' から axios をインポートします。

エクスポートデフォルトdefineComponent({
  名前: 'ホーム'、
  設定（）{
    console.log('セットアップ');
    定数 ebooks = ref();
    マウント時(()=>{
      axios.get("http://localhost:8888/ebook/list?name=spring").then(応答 =>{
        console.log("マウントされた状態");
        const データ = 応答.データ;
        ebooks.value=データコンテンツ;
      })
    })
    戻る {
      電子書籍
    }

  }
});
</スクリプト>

知識ポイント:

const ebooks=ref() ; これはレスポンシブデータであり、 Vue3レスポンシブデータを定義するため ref を追加します。つまり、 ebooksリアルタイムのデータ表示です。
refに割り当てられた値はvalueです。
値を取得するには {{variable}} を使用します。

再コンパイルしてサービスを開始すると、次のような結果が表示されます。

2. リアクティブを使用してデータバインディングを実装する

同様にhomeでも変更します。サンプルコードは次のとおりです。

<テンプレート>
  <a-レイアウト>
    <a-layout-sider width="200" style="background: #fff">
      <a-メニュー
          モード="インライン"
          v-model:selectedKeys="selectedKeys2"
          v-model:openKeys="openKeys"
          :style="{ 高さ: '100%', 右境界線: 0 }"
      >
        <a-サブメニューキー="sub1">
          <テンプレート #タイトル>
                <span>
                  <ユーザーによるアウトライン />
                  サブナビ1
                </span>
          </テンプレート>
          <a-menu-item key="1">オプション1</a-menu-item>
          <a-menu-item key="2">オプション2</a-menu-item>
          <a-menu-item key="3">オプション3</a-menu-item>
          <a-menu-item key="4">オプション4</a-menu-item>
        </a-サブメニュー>
        <a-サブメニューキー="sub2">
          <テンプレート #タイトル>
                <span>
                  <ラップトップのアウトライン />
                  サブナビ2
                </span>
          </テンプレート>
          <a-menu-item key="5">オプション5</a-menu-item>
          <a-menu-item key="6">オプション6</a-menu-item>
          <a-menu-item key="7">オプション7</a-menu-item>
          <a-menu-item key="8">オプション8</a-menu-item>
        </a-サブメニュー>
        <a-サブメニューキー="sub3">
          <テンプレート #タイトル>
                <span>
                  <通知の概要 />
                  サブナビ3
                </span>
          </テンプレート>
          <a-menu-item key="9">オプション9</a-menu-item>
          <a-menu-item key="10">オプション10</a-menu-item>
          <a-menu-item key="11">オプション11</a-menu-item>
          <a-menu-item key="12">オプション12</a-menu-item>
        </a-サブメニュー>
      </a-メニュー>
    </a-layout-sider>
    <レイアウトコンテンツ
        :style="{ 背景: '#fff', パディング: '24px', マージン: 0, 最小高さ: '280px' }"
    >
      <strong>データバインディングの結果に ref を使用する:</strong><p></p>
      {{電子書籍1}}
      <p></p>
      <前>
{{電子書籍1}}
      </pre>
      <strong>データバインディング結果に ReactiveF を使用する:</strong><p></p>{{ebooks2}}
      <p></p>
      <前>
{{電子書籍2}}
      </pre>
    </a-レイアウトコンテンツ>
  </a-レイアウト>
</テンプレート>

<script lang="ts">
'vue' から {defineComponent、onMounted、ref、reactive、toRef} をインポートします。
'axios' から axios をインポートします。

エクスポートデフォルトdefineComponent({
  名前: 'ホーム'、
  設定（）{
    console.log('セットアップ');
    //データバインディングにはrefを使用します。const ebooks=ref();
    // リアクティブデータバインディングを使用する const ebooks1 = reactive({books:[]})
    マウント時(()=>{
      axios.get("http://localhost:8888/ebook/list?name=spring").then(応答 =>{
        console.log("マウントされた状態");
        const データ = 応答.データ;
        ebooks.value=データコンテンツ;
        ebooks1.books = データコンテンツ;
      })
    })
    戻る {
      電子書籍1: 電子書籍、
      ebooks2:toRef(ebooks1、"書籍")
    }

  }
});
</スクリプト>

知識ポイント:

vueからreactiveとtoRefをインポートする必要があります。
reactive({books:[]})では、 reactive （）オブジェクトを保存する必要があります。ここでは、 booksに空のコレクションを追加します。
toRef(ebooks1,"books") booksをレスポンシブ変数に変換します。
当然ですが、reactive を使うほうが面倒です。実際のプロジェクト開発では、 reactiveとref両方を使用する必要があります。
ref を使用する場合の問題は、変数を使用するときに、それを取得する場合でも使用する場合でもvalueを追加する必要があることです。

再コンパイルしてサービスを開始すると、次のような結果が表示されます。

3. 最後に

フロントエンド開発が人々に与える達成感は、 controllerやservice内のビジネスロジックコードのように大量に書かなければならず意味が分からないのとは異なり、直感的に確認できるため、より直接的です。しかし、これはcodingに対する私の愛情に影響を与えるものではありません。

これで、Vue3 を使用したデータバインディングとリストデータの表示に関するこの記事は終了です。Vue3 のデータバインディングとリストデータの表示に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

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