vueのウォッチャーの詳しい説明-jsチュートリアル-php.cn

vueのウォッチャーの詳しい説明

PHPz

リリース： 2018-09-30 16:38:15

オリジナル

6722 人が閲覧しました

ほとんどの場合、計算されたプロパティの方が適切ですが、カスタムウォッチャーが必要になる場合もあります。これが、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 にアクセス) を実行し、操作の頻度を制限できます。操作を実行し、最終結果に到達する前に中間状態をセットアップするとき。これは、計算されたプロパティでは実行できないことです。

<p id="watch-example">
<p>
Ask a yes/no question:
<input v-model="question">
</p>
<p>{{ answer }}</p>
</p>
<!-- Since there is already a rich ecosystem of ajax libraries -->
<!-- and collections of general-purpose utility methods, Vue core -->
<!-- is able to remain small by not reinventing them. This also -->
<!-- gives you the freedom to just use what you&#39;re familiar with. -->
<script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://unpkg.com/lodash@4.13.1/lodash.min.js"></script>
<script>
var watchExampleVM = new Vue({
el: &#39;#watch-example&#39;,
data: {
question: &#39;&#39;,
answer: &#39;I cannot give you an answer until you ask a question!&#39;
},
watch: {
 // 如果 question 发生改变，这个函数就会运行
question: function (newQuestion) {
this.answer = &#39;Waiting for you to stop typing...&#39;
this.getAnswer()
}
},
methods: {
 // _.debounce 是一个通过 lodash 限制操作频率的函数。
 // 在这个例子中，我们希望限制访问yesno.wtf/api的频率
 // ajax请求直到用户输入完毕才会发出
 // 学习更多关于 _.debounce function (and its cousin
// _.throttle), 参考: https://lodash.com/docs#debounce
getAnswer: _.debounce(
function () {
var vm = this
if (this.question.indexOf(&#39;?&#39;) === -1) {
vm.answer = &#39;Questions usually contain a question mark. ;-)&#39;
return
}
vm.answer = &#39;Thinking...&#39;
axios.get(&#39;https://yesno.wtf/api&#39;)
.then(function (response) {
vm.answer = _.capitalize(response.data.answer)
})
.catch(function (error) {
vm.answer = &#39;Error! Could not reach the API. &#39; + error
})
},
// 这是我们为用户停止输入等待的毫秒数
500
)
}
})
</script>

ログイン後にコピー