見落としがちなVue.jsのAPIを詳しく解説

見落としがちなVue.jsのAPIを詳しく解説

次のチェック

nextTick はブラウザに組み込まれているのではなく、Vue.js によって提供される関数です。 nextTick 関数は、次の DOM 更新サイクル後に実行されるコールバック関数 cb を受け取ります。たとえば、次の例をご覧ください。

<テンプレート>
  <div>
    <p v-if="show" ref="node">コンテンツ</p>
    <button @click="handleShow">表示</button>
  </div>
</テンプレート>
<スクリプト>
  エクスポートデフォルト{
    データ () {
      戻る {
        表示:偽
      }
    },
    メソッド: {
      ハンドル表示() {
        this.show = true;
        console.log(this.$refs.node); // 未定義
        this.$nextTick(() => {
          console.log(this.$refs.node); // <p>コンテンツ</p>
        });
      }
    }
  }
</スクリプト>

show が true に設定されている場合、p ノードはまだレンダリングされていないため、undefined が出力されます。nextTick コールバックでは、p がレンダリングされているため、ノードを正しく出力できます。

nextTick のソース コードは github.com/vuejs/vue/b… にあります。ご覧のとおり、Vue.js は nextTick を実装するために Promise、setTimeout、setImmediate の 3 つのメソッドを使用しています。環境によって使用されるメソッドは異なります。

v-model 構文シュガー

v-model は、<input> などのフォーム要素上のデータの双方向バインディングによく使用されます。ネイティブ要素に加えて、カスタムコンポーネントでも使用できます。

v-model は、props: value と events: input に分解できる構文シュガーです。つまり、コンポーネントは value という名前のプロパティと input という名前のカスタム イベントを提供する必要があります。これら 2 つの条件が満たされている場合、ユーザーはカスタム コンポーネントで v-model を使用できます。たとえば、次の例では数値セレクターを実装します。

<テンプレート>
  <div>
    <button @click="increase(-1)">1 減少</button>
    <span style="color: red;padding: 6px">{{ 現在の値 }}</span>
    <button @click="increase(1)">1 増加</button>
  </div>
</テンプレート>
<スクリプト>
  エクスポートデフォルト{
    名前: 'InputNumber',
    小道具: {
      価値: {
        タイプ: 数値
      }
    },
    データ () {
      戻る {
        現在の値: this.value
      }
    },
    時計:
      値 (val) {
        this.currentValue = val;
      }
    },
    メソッド: {
      増加(値) {
        this.currentValue += val;
        this.$emit('input', this.currentValue);
      }
    }
  }
</スクリプト>

通常、プロパティはコンポーネント内で変更することはできず、親を通じて変更する必要があります。したがって、v-model の実装には通常、currentValue と呼ばれる内部データがあり、最初に value から値を取得します。value が変更されると、watch を通じてリアルタイムで更新されます。コンポーネントは value の値を変更するのではなく、currentValue を変更します。また、変更された値をカスタム イベント入力を通じて親コンポーネントに送信します。値を受け取った後、親コンポーネントは value を変更します。したがって、上記の数値セレクター コンポーネントは、次の 2 つの方法で使用できます。

<テンプレート>
  <InputNumber v-model="値" />
</テンプレート>
<スクリプト>
  '../components/input-number/input-number.vue' から InputNumber をインポートします。

  エクスポートデフォルト{
    コンポーネント: { InputNumber },
    データ () {
      戻る {
        値: 1
      }
    }
  }
</スクリプト>

または:

<テンプレート>
  <InputNumber :value="値" @input="ハンドル変更" />
</テンプレート>
<スクリプト>
  '../components/input-number/input-number.vue' から InputNumber をインポートします。

  エクスポートデフォルト{
    コンポーネント: { InputNumber },
    データ () {
      戻る {
        値: 1
      }
    },
    メソッド: {
      ハンドル変更 (値) {
        this.value = val;
      }
    }
  }
</スクリプト>

value と input の名前を使用したくない場合は、Vue.js 2.2.0 以降では、名前を指定するためのモデル オプションが提供されているため、数値セレクター コンポーネントは次のように記述することもできます。

<テンプレート>
  <div>
    <button @click="increase(-1)">1 減少</button>
    <span style="color: red;padding: 6px">{{ 現在の値 }}</span>
    <button @click="increase(1)">1 増加</button>
  </div>
</テンプレート>
<スクリプト>
  エクスポートデフォルト{
    名前: 'InputNumber',
    小道具: {
      番号: {
        タイプ: 数値
      }
    },
    モデル: {
      プロパティ: '数値'、
      イベント: '変更'
    },
    データ () {
      戻る {
        現在の値: this.number
      }
    },
    時計:
      値 (val) {
        this.currentValue = val;
      }
    },
    メソッド: {
      増加(値) {
        this.currentValue += val;
        this.$emit('number', this.currentValue);
      }
    }
  }
</スクリプト>

モデル オプションでは、value と input の代わりに prop と event の名前を指定できます。これは、これらの 2 つの名前が一部のネイティブ フォーム要素で他の用途に使用されるためです。

.sync 修飾子

Vue.js 1.x を使用したことがある場合は、.sync に精通している必要があります。 1.x では、.sync を使用して双方向にデータをバインドできます。つまり、親コンポーネントと子コンポーネントの両方がデータを変更でき、双方向に応答します。この使用法は、Vue.js 2.x では非推奨です。目的は、子コンポーネントが誤って親コンポーネントの状態を変更するのを防ぐために、親コンポーネントと子コンポーネントを可能な限り分離することです。

ただし、Vue.js バージョン 2.3.0 では .sync 修飾子が追加されましたが、その使用方法は 1.x とまったく同じではありません。 2.x の .sync は、真の双方向バインディングではなく、構文シュガーです。データの変更は、子コンポーネントではなく、親コンポーネントで実行されます。

引き続き数値セレクターの例を使用しますが、今回は v-model の代わりに .sync を使用し、次のように書き直すことができます。

<テンプレート>
  <div>
    <button @click="increase(-1)">1 減少</button>
    <span style="color: red;padding: 6px">{{ 値 }}</span>
    <button @click="increase(1)">1 増加</button>
  </div>
</テンプレート>
<スクリプト>
  エクスポートデフォルト{
    名前: 'InputNumber',
    小道具: {
      価値: {
        タイプ: 数値
      }
    },
    メソッド: {
      増加(値) {
        this.$emit('update:value', this.value + val);
      }
    }
  }
</スクリプト>

使用例:

<テンプレート>
  <InputNumber :value.sync="値" />
</テンプレート>
<スクリプト>
  '../components/input-number/input-number.vue' から InputNumber をインポートします。

  エクスポートデフォルト{
    コンポーネント: { InputNumber },
    データ () {
      戻る {
        値: 1
      }
    }
  }
</スクリプト>

v-model の実装よりもはるかにシンプルに見えますが、効果は同じです。コンポーネントには v-model は 1 つしか存在できませんが、.sync は複数設定できます。 .sync は優れていますが、次のような制限もあります。

  • 式では使用できません (例: v-bind:title.sync="doc.title + '!'" は無効です)。
  • リテラル オブジェクトでは使用できません (例: v-bind.sync="{ title: doc.title }" は正しく機能しません)。

$セット

$set は前のセクションで紹介しました。これは次の 2 つの状況で使用されます。

JavaScript の制限により、Vue は次の配列の変更を検出できません。

  • インデックスを使用してアイテムを直接設定する場合、たとえば次のようにします。this.items[index] = value;
  • 配列の長さを変更する場合、たとえば、vm.items.length = newLength となります。

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

例えば、

// 配列エクスポートデフォルト{
  データ () {
    戻る {
      項目: ['a', 'b', 'c']
    }
  },
  メソッド: {
    ハンドラ(){
      this.items[1] = 'x'; // 応答なし }
  }
}

$set の使用:

// 配列エクスポートデフォルト{
  データ () {
    戻る {
      項目: ['a', 'b', 'c']
    }
  },
  メソッド: {
    ハンドラ(){
      this.$set(this.items, 1, 'x'); // レスポンシブです }
  }
}

オブジェクトを例に挙げます。

// オブジェクトエクスポートデフォルト{
  データ () {
    戻る {
      アイテム:
        1: 1
      }
    }
  },
  メソッド: {
    ハンドラ(){
      this.item.b = 2; // 応答なし }
  }
}

$set の使用:

// オブジェクトエクスポートデフォルト{
  データ () {
    戻る {
      アイテム:
        1: 1
      }
    }
  },
  メソッド: {
    ハンドラ(){
      this.$set(this.item, 'b', 2); // レスポンシブです }
  }
}

さらに、次の配列メソッドは、応答性の高いビューの更新をトリガーできます。

push()、pop()、shift()、unshift()、splice()、sort()、reverse()。

もう 1 つのトリックは、最初に配列をコピーし、次にそれをインデックスで変更し、元の配列全体を置き換えることです。次に例を示します。

ハンドラ(){
  const データ = [...this.items];
  データ[1] = 'x';
  this.items = データ;
}

計算プロパティセット

計算プロパティはシンプルでよく使用されますが、ほとんどの場合、計算を通じて他の状態に依存するデータを取得するために、通常の従来の書き込み方法であるデフォルトの get メソッドを使用します。例えば:

計算: {
  フルネーム () {
    `${this.firstName} ${this.lastName}` を返します。
  }
}

ここでの fullName は、実際には関数ではなくオブジェクトとして記述できます。ただし、関数形式では、デフォルトで get メソッドを使用します。オブジェクトとして記述する場合は、set メソッドも使用できます。

計算: {
  フルネーム:
    得る () {
      `${this.firstName} ${this.lastName}` を返します。
    },
    設定(値) {
      const names = val.split(' ');
      this.firstName = 名前[0];
      this.lastName = names[names.length - 1];
    }
  }
}

計算プロパティは、ほとんどの場合、読み取り専用です。set を使用した後は、書き込みが可能になります。たとえば、上記の例では、this.fullName = 'Aresn Liang' を実行すると、計算セットが呼び出され、firstName と lastName が Aresn と Liang に割り当てられます。

要約する

これで、Vue.js の見落としがちな API についての記事は終了です。Vue.js の見落としがちな API についてさらに詳しく知りたい方は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue.jsプロジェクトのAPIとルーター設定の分割実践の詳細説明
  • vue.js のグローバル API である nextTick の包括的な分析

<<:  MySQL 8.0.20 インストールチュートリアルとインストールに関する問題に関する詳細なチュートリアル

>>:  Linux 上の Vim で色とテーマを変更する方法

推薦する

Windows 10 に TomCat をインストールするチュートリアル図

WindowsにTomCatをインストールするこの記事では、WindowsプラットフォームにTomC...

jsはウォーターフォールフローのボトムアウトによるデータの動的ロードを実現します

この記事では、ウォーターフォールフローが底に達したときにデータを動的にロードするためのjsの具体的な...

Ubuntu 18.0.4 MySQL 8.0.20 のインストールと設定方法のグラフィックチュートリアル

MySQL 8.0.20 のインストールおよび設定方法は、参考としてグラフィック チュートリアルにま...

XHTMLタグは適切に使用する必要があります

<br />123WORDPRESS.COM の以前のチュートリアルでは、Web ページ...

MySQL 匿名ログインでデータベースを作成できない問題の解決方法

よくある質問ユーザー ''@'localhost' によるデータベー...

仮想マシンのディスクサイズを拡張する方法

Vmvare が仮想マシンのディスク サイズを設定した後、ディスク領域が不足していることがわかりまし...

Dockerfile における VOLUME と docker -v の違い

Dockerfile でのボリュームのマウントと docker -v コマンドによるマウントには明ら...

CentOS 6.8 での Hadoop 3.1.1 完全分散インストール ガイド (推奨)

上記:このドキュメントは、3 台の仮想マシンが相互に ping を実行できること、ファイアウォールが...

インデックスとテーブルリターンをカバーするMySQLの使い方

インデックスの2つの主要なカテゴリ使用されるストレージエンジン: MySQL 5.7 InnoDBク...

モバイルフロントエンド適応ソリューション(概要)

ネットで検索してみたところ、多くの面接でモバイル適応方法について質問されることが分かりました。最近い...

CSS ブラウザ互換性の問題に対する 4 つの解決策

フロントエンドは、技術が急速に進化するだけでなく、知っておくべき事柄が多すぎるという理由で大変な仕事...

マウスが画像のハイパーリンク上を通過するときに画像のサイズ(幅、高さ)を変更する CSS

マウスが画像の上を通過したときに画像のハイパーリンクを変更する方法:コードをコピーコードは次のとおり...

Linux サーバーで MySQL リモート接続を有効にする方法

序文以前の非MKレコードを再編成するためのMySQLの学習説明する有効になっていない場合、データベー...

MySql8.0 のトランザクション分離レベルエラーの問題を解決する

目次MySql8.0 トランザクション分離レベルエラーの表示質問コマンドは次のように変更されますMy...

hr 水平線スタイルの例コード

コードをコピーコードは次のとおりです。 <hr style="width:490px...