Vue.js を使用してプロパティの変更を監視する

前書き

Vue インスタンスを作成するとき、Vue はデータのプロパティを走査し、ES5 の Object.defineProperty を通じてそれらをゲッター/セッターに変換します。内部的には、Vue は依存関係を追跡し、変更を通知します。

   
const vm = new Vue({
 data: {foo: 1} // 'vm.foo' (在内部，同 'this.foo') 是响应的
})

プロパティの変更を監視する

Vue インスタンスは、プロパティの変更を監視するための $watch メソッドを提供します。

const vm = new Vue({
 data: {foo: 1}
})
 
vm.$watch('foo', function (newValue, oldValue) {
 console.log(newValue, oldValue) // 输出 2 1
 console.log(this.foo) // 输出 2
})
 
vm.foo = 2

プロパティが変更されると、応答関数が呼び出され、内部的にはこれが自動的に Vue インスタンス vm にバインドされます。

応答は非同期であることに注意してください。

以下の通り:

const vm = new Vue({
 data: {foo: 1}
})
 
vm.$watch('foo', function (newValue, oldValue) {
 console.log('inner:', newValue) // 后输出 "inner" 2
})
 
vm.foo = 2
console.log('outer:', vm.foo) // 先输出 "outer" 2

データとビューのバインディングは $watch Vue を通じて実現されます。データ変更が検出されると、Vue は同じイベント ループ内で DOM を非同期的に更新し、次のイベント ループでキューを更新し、必要な更新のみを実行します。

は次のとおりです:

const vm = new Vue({
 data: {foo: 1}
})
 
vm.$watch('foo', function (newValue, oldValue) {
 console.log('inner:', newValue) // 后只输出一次 "inner" 5
})
 
vm.foo = 2
vm.foo = 3
vm.foo = 4
console.log('outer:', vm.foo) // 先输出 "outer" 4
vm.foo = 5

Computed property

MV* MV* では、Model レイヤーのデータを View に表示する場合、多くの場合、複雑なデータ処理ロジックが存在します。計算されたプロパティを賢く使用すると便利です。

const vm = new Vue({
 data: {
 width: 0,
 height: 0,
 },
 computed: {
 area () {
  let output = ''
  if (this.width > 0 && this.height > 0) {
  const area = this.width * this.height
  output = area.toFixed(2) + 'm²'
  }
  return output
 }
 }
})
 
vm.width = 2.34
vm.height = 5.67
console.log(vm.area) // 输出 "13.27m²"

計算プロパティ内では、これは自動的に vm にバインドされるため、計算プロパティを宣言するときにアロー関数の使用を避ける必要があります。

上記の例では、vm.width と vm.height が応答します。vm.area が初めて this.width と this.height を読み取るとき、Vue はそれらを vm.area の依存関係として収集します。 width または vm.height が変更されると、vm.area が再評価されます。計算されたプロパティは、その依存関係キャッシュに基づいています。vm.width と vm.height が変更されない場合、vm.area を複数回読み取ると、再評価することなく、前の計算結果がすぐに返されます。

vm.width と vm.height が応答性があるのと同様に、vm.area では依存するプロパティを変数に割り当て、変数を読み取ることでプロパティを読み取る回数を減らし、同時に解決することができます。条件分岐、Vue 依存関係を収集できない場合があります。

実装は次のとおりです:

const vm = new Vue({
 data: {
 width: 0,
 height: 0,
 },
 computed: {
 area () {
  let output = ''
  const {width, height} = this
  if (width > 0 && height > 0) {
  const area = width * height
  output = area.toFixed(2) + 'm²'
  }
  return output
 }
 }
})
 
vm.width = 2.34
vm.height = 5.67
console.log(vm.area) // 输出 "13.27m²"

ob.jsを介してVueの属性監視モジュールを単独で使用します

学習と使用を容易にするために、ob.jsはVueの属性監視モジュールを抽出してカプセル化します。

ob.js GitHub アドレス: https://github.com/cnlon/ob.js

インストール

npm install --save ob.js

プロパティの変更を観察する

const target = {a: 1}
ob(target, 'a', function (newValue, oldValue) {
 console.log(newValue, oldValue) // 3 1
})
target.a = 3

計算されたプロパティを追加する

rr

Vue インスタンスを宣言するのと同じようにパラメータセットを渡します

const target = {a: 1}
ob.compute(target, 'b', function () {
 return this.a * 2
})
target.a = 10
console.log(target.b) // 20