Vueでウォッチャーを使用する方法-jsチュートリアル-php.cn

Vueでウォッチャーを使用する方法

亚连

リリース： 2018-06-22 17:21:37

オリジナル

1606 人が閲覧しました

この記事では主に vue のウォッチャーに関する関連情報を紹介します。必要な方は参考にしてください

ウォッチャーの観察

ほとんどの場合、計算されたプロパティの方が適切ですが、場合によってはカスタムのウォッチャーも必要になります。これが、Vue が監視オプションを通じてデータ変更に応答するためのより一般的な方法を提供する理由です。これは、データの変更に応じて非同期または高コストの操作を実行する場合に便利です。

誰もが watch に精通しているはずです。プロジェクトでは次の記述メソッドを使用しています:

watch: {
 someProp () {
  // do something
 }
}
// 或者
watch: {
 someProp: {
  deep: true,
  handler () {
   // do something
  }
 }
}

ログイン後にコピー

上記の記述メソッドは、いくつかの Prop プロパティの変更を監視する必要があることを vue に指示するため、vue は内部的にウォッチャーオブジェクトを作成します。。 (紙面の都合上、watcher の具体的な実装については触れません。興味があれば、watcher のソースコードを直接見ることができます)

ただし、vue での watcher の機能はそれほど単純ではありません。コード:

<template>
 <p>
  <p>a: {{ a }}</p>
  <p>b: {{ b }}</p>
  <button @click="increment">+</button>
 </p>
</template>
<script>
export default {
 data () {
  return {
   a: 1
  }
 },
 computed: {
  b () {
   return this.a * 2
  }
 },
 watch: {
  a () {
    console.log(&#39;a is changed&#39;)
  }
 },
 methods: {
  increment () {
   this.a += 1
  }
 },
 created () {
  console.log(this._watchers)
 }
}
</script>

ログイン後にコピー

オンラインデモ

上記のコードは非常にシンプルです。ここでは主に、次のように、作成されたフックに出力される this._watchers に焦点を当てます:

3 つのウォッチャーをそれぞれ展開し、各式を上から下まで観察します。 :

b() {   return this.a * 2;↵  }
"a"
function () {   vm._update(vm._render(), hydrating);↵  }

ログイン後にコピー

上記の 3 つのウォッチャーは 3 つの異なる機能を表します。ウォッチャーは、その機能に応じて 3 つのカテゴリに分類されます:

属性の変更を監視するために watch で定義されたウォッチャー (2 つ目)
計算された属性 (最初の属性)
ページ更新のウォッチャー (3 番目)

normal-watcher

watch で定義したものはすべて、このタイプに属します。監視対象のプロパティが変化すると、すべてが定義されたコールバック関数をトリガーします

computed-watcher

すべての計算された属性は、最終的に対応するウォッチャーオブジェクトを生成しますが、このタイプのウォッチャーにはその特性があるため、例として上記の b を取り上げます。 :

属性 b a に依存して、a が変更された場合、b はすぐには再計算されません。後で他の場所で b を読み取る必要がある場合にのみ実際に計算されます。つまり、遅延 (遅延計算) 特性があります。 render-watcher

各コンポーネントには 1 つの があり、data/computed

のプロパティが変更されると、コンポーネントのビューを更新するために render-watcher が呼び出されます

render-watcher, function () {↵ vm._update(vm._render(), hydrating);↵ }

3 つのウォッチャーの実行順序

機能的に異なることを除いて、これら 3 つのウォッチャーには次のような固定実行順序もあります。

computed-render -> normal-watcher -> render-watcher

ログイン後にコピー

この配置には理由があって、コンポーネントビューを更新するときに、計算された属性ががすでに最新の値である場合、render-watcher が computed-render よりも前にランク付けされている場合、ページが更新されたときに計算された値が古いデータになります。

サンプルコードから vue のウォッチャーを見てみましょう

この例では、watch オプションを使用することで、非同期操作 (API にアクセス) を実行し、操作の頻度を制限できます。操作を実行し、最終結果に到達する前に中間状態をセットアップするとき。これは、計算されたプロパティでは実行できないことです。 rreee 以上が皆さんのためにまとめたもので、今後皆さんのお役に立てれば幸いです。

Vueのレスポンシブ原則について(詳細なチュートリアル)

angularjsで棒グラフの動的読み込みを実装する方法

Angularスコープでスコープを使用する方法

使い方reactの実装方法メニュー権限制御

vue.js で props がパラメータを渡す方法の詳細な解釈

以上がVueでウォッチャーを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。