見落としがちな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 をよろしくお願いいたします。

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