見落としがちな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 で色とテーマを変更する方法

推薦する

HTML テーブルタグチュートリアル (13): 内部境界スタイル属性ルール

RULES を使用すると、テーブルの内部境界のスタイルを制御できます。基本的な構文<TABLE...

js 配列エントリ() 反復メソッドを取得する

目次1.entires() メソッドの詳細な構文2.entires() メソッドの一般的な使用法と注...

Vue.js $refs 使用例の説明

プロパティやイベントがあるにもかかわらず、JavaScript で子コンポーネントに直接アクセスする...

HTML の div、td、p およびその他のコンテナーでの強制改行と非改行の実装

1. 改行を強制せず、省略記号で終了します。コードをコピーコードは次のとおりです。 <div ...

MySQL インポートおよびエクスポートのバックアップの詳細

目次1. MySQLのバックアップタイプの詳細な説明1. バックアップがデータベースに与える影響に基...

Windows に MySQL 5.7.18 の解凍バージョンをインストールするチュートリアル

1. インストールプロセスMySQL バージョン: 5.7.18 1. my.ini ファイル(簡易...

Vue プラグイン エラー: このページで Vue.js が検出されました。問題は解決しました

Vue プラグインがエラーを報告しました: このページで Vue.js が検出されましたVueプラグ...

ネイティブ JavaScript 継承方法とその長所と短所の詳細な説明

目次序文プロトタイプ継承アドバンテージ欠点コンストラクタの継承アドバンテージ欠点組み合わせ継承寄生的...

MySQL 5.7 mysql コマンドラインクライアントの使用コマンドの詳細

MySQL 5.7コマンドを使用するMySQLコマンドラインクライアント1. パスワードを入力してく...

JavaScript で Webpack を使用するチュートリアル

目次0. Webpackとは1. Webpackの使用2. Webpackのコアコンセプト2.1 エ...

JavaScript のプライベート クラス フィールドと TypeScript のプライベート修飾子の詳細な説明

目次JavaScript のプライベート クラス フィールドとプライバシーの必要性JavaScrip...

MySQL シャーディング入門ガイド

序文リレーショナル データベースは、システムのボトルネックになる可能性が高くなります。単一のマシンの...

dockerにmysqlをインストールした後にNavicatが接続できない問題に対する完璧な解決策

1. Dockerがイメージをプルするdocker pull mysql (デフォルトで最新バージョ...

MYSQLは、ショッピングカートに追加する際に重複追加を防ぐためのサンプルコードを実装します。

序文最近、仕事の都合で、APP ショッピングカートの注文支払いに取り組んでいました。テスト中にバグが...

CentOS 7 に Percona Server+MySQL をインストールする

1. 環境の説明(1) CentOS-7-x86_64、カーネルバージョン uname -r は、 ...