告訴元首我已盡力，告訴父親我仍然愛他！

熟悉 Vue 的同學(xué)對(duì) computed 和 watch 一定很熟悉，這些特性大大方便了我們對(duì)代碼中的數(shù)據(jù)進(jìn)行處理：

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 計(jì)算屬性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 實(shí)例
      return this.message.split('').reverse().join('')
    }
  }
})

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

這是 Vue 官網(wǎng)中兩段代碼。

官方實(shí)現(xiàn)

如今小程序也有了自己的實(shí)現(xiàn)，詳見官方文檔 observer 。小程序官方 github
中也開源了通過 Behaviors 實(shí)現(xiàn)的 Vue 風(fēng)格的computed和watch：https://github.com/wechat-miniprogram/computed。

那么在微信沒有提供這些方法之前，如何自主實(shí)現(xiàn)數(shù)據(jù)的偵聽器和計(jì)算屬性呢？

## 自主實(shí)現(xiàn)

先看看定義的使用文檔：

Page({
 data: {
   list: [],
   list2: [],
   size: 0
 },
 // 偵聽器函數(shù)名必須跟需要被偵聽的 data 對(duì)象中的屬性同名，
 // 其參數(shù)中的 newValue 為屬性改變后的新值，oldValue 為改變前的舊值
 watch: {
   // 如果 `list` 發(fā)生改變，這個(gè)函數(shù)就會(huì)運(yùn)行
   list(newValue, oldValue) {
     console.log(oldValue + '=>' + newValue)
   }
 },
 // 傳入的參數(shù)list必須是 data 里面的屬性
 // 這里可以傳入多個(gè) data 屬性
 computed({
   list,
   list2
 }) {
   return {
     size: list.length,
     size2: list2.length
   }
 }
})

在 Page 的傳參中多了兩個(gè)熟悉的屬性，用法不用解釋太多。需要繼續(xù)對(duì)小程序提供的 Page 方法進(jìn)行改造，此外，因?yàn)樗袛?shù)據(jù)變化都會(huì)用到 setData 方法去觸發(fā)，所以還需要改造這個(gè)方法。

改造 Page 和 setData

想要基于原有的 setData 進(jìn)行封裝，那就得先得到這個(gè)函數(shù)緩存下來（像是緩存原有的 Page 一樣）。想到 onLoad 是小程序頁面的第一個(gè)生命周期函數(shù)，可以在這里進(jìn)行操作：

// 緩存原有的 `Page`
let originPage = Page

// 定義新的 Page
function MyPage(config) {
  let that = this
  this.watch = config.watch
  this.computed = config.computed
  this.lifetimeBackup = {
    onLoad: config.onLoad
  }
  config.onLoad = function(options) {
    // 緩存下原有的 `setData`
    this._setData = this.setData.bind(this)
    this.setData = (data) => {
      // 偵聽器
      that.watching(data)
      // 計(jì)算器
      let newData = that.getComputedData(data)
      this._setData(extend(data, newData))
    }
    // 備份下頁面實(shí)例
    that.context = this
    // 執(zhí)行真正的 `onLoad`
    this.lifetimeBackup.onLoad.call(this, options)
  }
  
  // ...

  originPage(config)
}

MyPage.prototype.watching = funtion(data) {
  // 執(zhí)行偵聽器
  // ...
}

// 計(jì)算器
MyPage.prototype.getComputedData = function(data) {
  // 開始生成新的數(shù)據(jù)
  // ...
}

function page (config) {
  return new MyPage(config)
}

大致代碼如上，重新定義了 this.setData，備份了原有的 setData 到 this._setData。當(dāng)然，這里只考慮了 setData 傳一個(gè)參數(shù)的情況，多個(gè)參數(shù)需要再對(duì)代碼優(yōu)化下。

注意：調(diào)用 watching 和 createNewData 的對(duì)象是 that，因?yàn)?this 指向小程序頁面實(shí)例，沒有自定的這個(gè)方法。

做完上述改造，后續(xù)的 watch 和 computed 就簡(jiǎn)單多了。

偵聽器 watch

MyPage.prototype.watching = function(data) {
  var context = this.context
  var oldData = context.data
  // 開始生成新的數(shù)據(jù)
  var watch = this.watch
  if (watch) {
    Object.keys(watch).forEach(function (k) {
      // 如果新的 data 中屬性被偵聽，執(zhí)行偵聽函數(shù)
      if (k in data) {
        var newValue = data[k]
        var oldValue = oldData[k]
        watch[k].apply(context, [
          newValue,
          oldValue
        ])
      }
    })
  }
}

簡(jiǎn)易的偵聽器就寫好了，通過 setData 觸發(fā)自定的 watch 中的偵聽函數(shù)。

計(jì)算器 computed

MyPage.prototype.getComputedData = function(data) {
  var context = this.context
  var computed = this.computed
  var computedData
  if (computed) {
    computedData = computed.call(context, data)
  }
  return computedData
}

這樣就得到了計(jì)算后的新生成的數(shù)據(jù)：computedData。

總結(jié)

不斷的通過備份、代理微信原有的方法，自主實(shí)現(xiàn)了簡(jiǎn)單的偵聽器和計(jì)算器。當(dāng)然這些代碼只是為了方便分享提取出來了提供思路，實(shí)際業(yè)務(wù)中遇到情況復(fù)雜的多，代碼量遠(yuǎn)遠(yuǎn)也不止這些。

本頁內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁中由涉嫌抄襲的內(nèi)容，請(qǐng)及時(shí)與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會(huì)在5工作日內(nèi)聯(lián)系您，一經(jīng)查實(shí)，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://www.cjxv.cn/25244.html