ホームページ > 記事 > ウェブフロントエンド > 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