前言
創(chuàng)建 Vue 實(shí)例時(shí)，Vue 將遍歷 data 的屬性，通過 ES5 的 Object.defineProperty 將它們轉(zhuǎn)為 getter/setter，在其內(nèi)部 Vue 可以追蹤依賴、通知變化。
const vm = new Vue({ data: {foo: 1} // 'vm.foo' (在內(nèi)部，同 'this.foo') 是響應(yīng)的})觀察屬性變化
Vue 的實(shí)例提供了 $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當(dāng)屬性變化后，響應(yīng)函數(shù)將會(huì)被調(diào)用，在其內(nèi)部，this 自動(dòng)綁定到 Vue 的實(shí)例 vm 上。
需要注意的是，響應(yīng)是異步的。
如下：
const vm = new Vue({ data: {foo: 1}})vm.$watch('foo', function (newValue, oldValue) { console.log('inner:', newValue) // 后輸出 "inner" 2})vm.foo = 2console.log('outer:', vm.foo) // 先輸出 "outer" 2通過 $watch Vue 實(shí)現(xiàn)了數(shù)據(jù)和視圖的綁定。觀察到數(shù)據(jù)變化，Vue 便異步更新 DOM ，在同一事件循環(huán)內(nèi)，多次數(shù)據(jù)變化將會(huì)被緩存起來，在下次事件循環(huán)中，Vue 刷新隊(duì)列并僅執(zhí)行必要的更新。
如下：
const vm = new Vue({ data: {foo: 1}})vm.$watch('foo', function (newValue, oldValue) { console.log('inner:', newValue) // 后只輸出一次 "inner" 5})vm.foo = 2vm.foo = 3vm.foo = 4console.log('outer:', vm.foo) // 先輸出 "outer" 4vm.foo = 5計(jì)算屬性
MV* 中，將 Model 層數(shù)據(jù)展現(xiàn)到 View，經(jīng)常有復(fù)雜的數(shù)據(jù)處理邏輯，這種情況下，使用計(jì)算屬性 (computed property) 更加明智。
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.34vm.height = 5.67console.log(vm.area) // 輸出 "13.27m²"在計(jì)算屬性內(nèi)部，this 自動(dòng)綁定 vm，因此聲明計(jì)算屬性時(shí)需要避免使用箭頭函數(shù)。
上例中，vm.width 和 vm.height 是響應(yīng)的，vm.area 內(nèi)部首次讀取 this.width 和 this.height 時(shí)，Vue 收集其做為 vm.area 的依賴，此后 vm.width 或 vm.height 變化時(shí)，vm.area 重新求值。計(jì)算屬性是基于它的依賴緩存，如果 vm.width 和 vm.height 沒有變化，多次讀取 vm.area，會(huì)立即返回之前的計(jì)算結(jié)果，而不必再次求值。
同樣由于 vm.width 和 vm.height 是響應(yīng)的，在 vm.area 中可以將依賴的屬性賦值給一個(gè)變量，通過讀取變量來減少讀取屬性次數(shù)，同時(shí)解決在條件分支中，Vue 有時(shí)會(huì)無法收集到依賴的問題。
實(shí)現(xiàn)如下：
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.34vm.height = 5.67console.log(vm.area) // 輸出 "13.27m²"通過 ob.js 單獨(dú)使用 Vue 的屬性觀察模塊
為方便學(xué)習(xí)和使用，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添加計(jì)算屬性
const target = {a: 1}ob.compute(target, 'b', function () { return this.a * 2})target.a = 10console.log(target.b) // 20像聲明 Vue 實(shí)例一樣傳入?yún)?shù)集合
const options = { data: { PI: Math.PI, radius: 1, }, computed: { 'area': function () { return this.PI * this.square(this.radius) }, }, watchers: { 'area': function (newValue, oldValue) { console.log(newValue) // 28.274333882308138 }, }, methods: { square (num) { return num * num }, },}const target = ob.react(options)target.radius = 3總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
