Vue開発の一般的な手法の詳細な説明

Vue開発の一般的な手法の詳細な説明

$nextTick()

this.$nextTick() は、次の DOM 更新サイクルが終わるまでコールバックを遅延します。データの変更後すぐに使用し、DOM が更新されるまで待機します。

使用シナリオ 変数が最初に割り当てられたか更新されたが、DOM が更新されていない場合、変数値の使用は機能しないことがあります。この時点で、 this.$nextTick() を使用して DOM 更新が読み込まれるのを待機し、すぐに使用する必要があります。作成されたフック関数や DOM 更新を伴う状況でよく使用されます。
使用法

this.$nextTick(() => { this.$refs.table.refresh(true)})

this.$nextTick() は、ページインタラクション、特にバックグラウンドからデータを取得した後のDOMオブジェクトの再生成後の操作において大きな利点があります。

$forceUpdate()

Vue インスタンスを強制的に再レン​​ダリングします。これは、すべての子コンポーネントではなく、インスタンス自体とスロット コンテンツに挿入された子コンポーネントにのみ影響することに注意してください。

使用シナリオ

オブジェクトの配列などの複雑なオブジェクトの場合、配列内の要素に属性を直接追加したり、配列の長さを直接 0 に変更したりできます。Vue は変更が発生したことを認識できないため、強制更新を使用できます。

一方、フォームがレンダリングされるときに、選択操作が実行されることがありますが、フォームの内容は更新されません。強制更新を使用することができます。

ここに画像の説明を挿入

使用法

this.$nextTick(() => {
  this.$refs.table.refresh(true)
})

$セット()

使用シナリオ

ES5 の制限により、Vue.js はオブジェクト プロパティの追加または削除を検出できません。

レスポンシブ オブジェクトにプロパティを追加し、新しいプロパティもレスポンシブであり、ビューの更新をトリガーすることを確認します。 Vue は通常の新しいプロパティ (this.myObject.newProperty = 'hi' など) を検出できないため、レスポンシブ オブジェクトに新しいプロパティを追加するにはこれを使用する必要があります。

オブジェクトは Vue インスタンス、または Vue インスタンスのルート データ オブジェクトになることはできないことに注意してください。

使用法

this.$set( ターゲット、プロパティ名/インデックス、値 )

  • target : 変更するデータソース(オブジェクトまたは配列)
  • propertyName/index : オブジェクトの新しく追加されたプロパティの名前、または配列の新しく追加された要素のインデックス位置
  • value : 新しく追加された属性の値
// オブジェクト this.$set(this.student,"age", 24)
// 配列 this.$set(this.arrayList, 2, { name: "张三" })

.sync——2.3.0 以降の新機能 (Vue 3.x では v-model に置き換えられ、サポートされなくなりました)

使用シナリオ

場合によっては、プロパティに対して「双方向バインディング」を実行する必要があります。Vue 2.3.0 以降では、.sync 修飾子を使用してこれを実行できます。 Vue 3.0以降はサポートされなくなりました

使用法

親コンポーネント

<comp :foo.sync="bar"></comp>

実際、それは次のように拡張される。

<comp :foo="bar" @update:foo="val => bar = val"></comp>

サブコンポーネント

this.$emit('update:foo', newValue)

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue3コンポーネントの開発詳細
  • 実践的なVue開発スキル
  • Vue Element フロントエンドアプリケーション開発は ABP フレームワークのフロントエンドログインを統合します
  • Vue.js を使用して WeChat アプレットを開発するオープンソース フレームワーク mpvue 分析
  • Vueフレームワークでの商品コンポーネント開発の詳細説明
  • Vueフレームワークとフロントエンドおよびバックエンド開発の詳細な説明

<<:  ROS2のインストールとdocker環境の使い方について

>>:  Webフロントエンドスキル概要(個人の実務経験)

推薦する

1 つの記事で MySQL のプリコンパイルを理解する

1. プリコンパイルの利点私たちは皆、プリコンパイル機能を備えた JDBC の PreparedSt...

MySQL DDLステートメントの使用

序文SQL の言語分類には主に以下の種類があります。 DDLデータ定義言語作成、削除、変更データ定義...

Dockerカスタムネットワークの詳細な紹介

目次Dockerカスタムネットワーク1. カスタムネットワークの紹介2. カスタムネットワークを作成...

dockerプライベート倉庫の構築と利用の詳細説明

1. リポジトリイメージをダウンロードする docker プルレジストリ 2. プライベートウェアハ...

レスポンシブ原則と Vue2.0/3.0 の違いについての簡単な分析

序文vue3.0 が正式にリリースされて以来、多くの友人が vue3.0 に切り替えました。ここでは...

MySQL 5.7.17 winx64 無料インストールバージョン設定方法グラフィックチュートリアル

mysql5.7.17無料インストールバージョンのインストールに関する最近の経験1.ダウンロードして...

グローバルトーストコンポーネントをカプセル化するVueの完全な例

目次序文1. vue-cliを使う1. Toastコンポーネントを定義する2. main.jsで設定...

要素の円弧モーションを実現する CSS3 サンプルコード

CSS を使用して要素の円弧の動きを制御する方法CSS3 の新しい属性 transfrom トランジ...

ユニークインデックスの S ロックと X ロックによる MySQL デッドロック ルーチンの理解

「初心者向けソースコードからの MySQL デッドロック問題の理解」では、MySQL ソースコードを...

CSS フロートプロパティ図 フロートプロパティの詳細

CSS の float プロパティを正しく使用することは、カバーすべき内容が多く、ブラウザの互換性の...

JavaScript イベントバブリング、イベントキャプチャ、イベント委任の詳細な説明

1. イベントバブリング: JavaScript イベント伝播のプロセスでは、要素でイベントがトリガ...

長いデータを HTML で表示するときに処理する方法

HTML で長いデータを表示する場合、マウスをその上に移動するとデータを切り捨てて完全なデータを表示...

JavaScriptはシンプルな計算機能を実装します

この記事では、参考までに、簡単な計算機を実装するためのJavaScriptの具体的なコードを紹介しま...

Linuxファイルシステム操作の実装

この読書ノートでは、主にファイルシステムに関連する操作を記録します。ディスクとディレクトリの容量ディ...

ElementUI ページネーション コンポーネントの使い方 Vue でのページネーション

ElementUIページングコンポーネントPagination in Vueの使用は参考になります。...