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 のその他のコンテンツにも注目していただければ幸いです。