本來之前技術(shù)棧一直是Vue，后來做小程序了，各種不習(xí)慣，尤其是少了計(jì)算屬性和監(jiān)聽器，wxml里面又不能直接放函數(shù)，又沒有Vue那種過濾器的寫法。也許有人說直接uni-app就好了，但是平時(shí)做跨端的很少，所以我偏不用uni-app，我就要自己寫一個(gè)。以下內(nèi)容純靠個(gè)人臆想，搞出來的computed屬性雖然能用，但僅供參考。

思路

出于偶然發(fā)現(xiàn)了小程序能夠自己重寫生命周期鉤子，聽說很多的一些統(tǒng)計(jì)sdk也都是利用這樣的機(jī)制做事件打點(diǎn)統(tǒng)計(jì)啥的，于是這么好玩的東西，我決定參一腳試一下好不好玩。computed屬性的擴(kuò)展就是在重寫的生命周期里面做的。

基本思路其實(shí)很簡(jiǎn)單，就是重寫下setData用來監(jiān)聽修改的值，同步更新一下computed,為了讓computed能夠直接使用在wxml里就把computed上的屬性全部掛在到data上去，更新也使用的setData更新。本人不善言辭，直接上，上再解釋。

// computed.js
const oldPage = Page
Page = function (app) {
    let oldOnLoad = app.onLoad;
    app.onLoad = function (options) {
        // 存一下原來的setData
        let o_setData = http://www.wxapp-union.com/this.setData
        // 用于保存依賴
        let dep = {}
        // 重寫setData
        this.setData = http://www.wxapp-union.com/function (o, fn) {
            // 調(diào)用原生setData
            o_setData.call(this, o, function () {
                // 如果定義有computed屬性則判斷一下是不是改變了計(jì)算屬性中所依賴的變量
                if (app.computed) {
                    // 循環(huán)遍歷
                    Object.keys(dep).map(c => {
                        Object.keys(o).map(i => {
                            // 找出需要觸發(fā)更新的計(jì)算屬性，兼容下幾種寫法
                            if (dep[c].includes(i) || dep[c].includes(i.split('.')[0]) || dep[c].includes(i.split('[')[0])) {
                                o_setData.call(this, {
                                    [c]: app.computed[c].call(this, this.data)
                                })
                            }
                        })
                    })
                }
                // 觸發(fā)setData回調(diào)
                fn && fn.call(this)
            })
        }
        // 收集依賴，并將computed值掛載到data上
        if (app.computed) {
            // 為了不污染原來的data，深拷貝一份
            let _data = http://www.wxapp-union.com/JSON.parse(JSON.stringify(this.data))
            let bufferDep = []
            Object.keys(_data).map(key => {
                let val = _data[key]
                Object.defineProperty(_data, key, {
                    // 觸發(fā)收集
                    get: function () {
                        bufferDep.push(key)
                        return val
                    }
                })
            })
            Object.keys(app.computed).map(key => {
                // 重置依賴
                bufferDep = []
                this.setData({
                    // 下面這里調(diào)一下computed將值掛載到data上，并且同時(shí)會(huì)觸發(fā)收集
                    [key]: app.computed[key].call(this, _data)
                }, function () {
                    // 將每一個(gè)computed的依賴存好
                    dep[key] = bufferDep
                })
            })
        }
        oldOnLoad.call(this, options)
    }
    return oldPage(app)
}
復(fù)制代碼

使用:

// app.js
require('./computed.js')
App({})
復(fù)制代碼

// index.js
Page({
  data: {
    a: 0,
    k: [0, 0, 0, 1],
    c: {
      a: 9
    }
  },
  computed: {
    b(data) {
      return data.c.a + data.a + data.k[0]
    }
  },
  onLoad() {
    this.setData({
      a: 8,
      'c.a': 10,
      [`k[${0}]`]: 999
    }, () => {
      console.log(this.data.b)
    })
  },
})
復(fù)制代碼

{{a}}
{}
復(fù)制代碼

顯示結(jié)果如圖：

小啟發(fā)

其實(shí)小程序里面很多api都能重寫或者使用defineProperty來監(jiān)聽，可以用來解決日常很多的開發(fā)問題，像啥頁面棧問題，隨手加個(gè)watch監(jiān)聽器，加個(gè)store全局?jǐn)?shù)據(jù)管理啥的估計(jì)都不是啥大問題。重寫頁面各種生命周期啥的，只要不亂搞好像也沒什么大問題。