Vue.jsでのwatchの使い方を詳しく解説

この記事では、Vue.jsでの$watchの使い方を主に紹介しています。エディターをフォローして見てみましょう

この 2 日間で、Vue.js の $watch について多くのことを学びました。これは非常に重要なので、今日はいくつかメモを追加します。

githubソースコード

Observer、Watcher、vmはVueのより重要な部分であり、データ変更を検出した後のview更新の重要な部分であると言えます。単純な $watch 関数を実装する方法を見てみましょう。もちろん、Vue は多くの最適化メソッドを使用しますが、この記事では 1 つずつ説明しません。

例:

// 创建 vm
let vm = new Vue({
 data: 'a'
})

// 键路径
vm.$watch('a.b.c', function () {
 // 做点什么
})

まず、このデモと Vue での関係を明確にします:

vm $watch を呼び出した後、まず Observer 関数 を呼び出してデータを観察する Observer インスタンスを作成し、Observer は Dep を作成します。これはサブスクリプションを維持するために使用されます。次に、update 関数を提供する Watcher インスタンスを作成します。データが変更されると、コールバック関数がレイヤーごとに実行されます。

Observer と観察

再帰的 Observer 関数を呼び出して、Observer を作成します。 Observer を作成するプロセスで、Object.defineProperty() 関数を使用して get set 関数を追加し、Dep インスタンスを作成します。

export function observe (val) {
 if (!val || typeof val !== 'object') {
  return
 }
 return new Observer(val)
}

Dep.target とは一体何なのか疑問に思うかもしれません。

以上がVue.jsでのwatchの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。