小程序中使用watch Ⅱ，已封裝完成

在上一篇watch詳解中解釋了watch 的原理   鏈接

這次是我抽空完整封裝好的demo

效果：

頁面中代碼寫法：

函數觸發前：

函數觸發後：

 

具體效果描述：寫法與vue中的寫法相同，個人做了單向綁定，修改被監聽的參數，會同步到視圖層

 

如何使用

1.在項目文件目錄下創建一個存儲外部腳本的文件夾  例：single

 

2.創建一個js文件，並且寫入以下代碼 例：watch.js

寫入代碼

let singlever = {
    watch(_this,state) {
        if (!_this) { throw 'page對象不存在' }
        let subsitute = {}
        let watchFunc = _this.watch
        if(watchFunc.constructor === Function){     //非page構造
            console.info('非Page頁面,使用組件加載模式')
            watchFunc = _this.watch()
        }
        Object.keys(watchFunc).some(item => {
            if(watchFunc[item].constructor === Array){throw `監聽數據 ${item} 格式有問題`}
            if(!_this.data[item]){throw `被監聽數據 ${item} 不存在`}
            if(watchFunc[item].constructor === Object){
                console.log('數據爲object')
                Object.defineProperty(_this.data, item, {
                    set: function (val) {
                        if (subsitute['single_' + item] === val) { return }
                        subsitute['single_' + item] = val
                        _this.setData({ [item]: val })
                        watchFunc[item].set(val)
                    },
                    get:watchFunc[item].get
                })
            }else{
                Object.defineProperty(_this.data, item, {
                    set: function (val) {
                        if (subsitute['single_' + item] === val) { return }
                        subsitute['single_' + item] = val
                        _this.setData({ [item]: val })
                        watchFunc[item](val)
                    }
                })
            }
        })
    }
}

module.exports = singlever

 

3.在小程序入口js文件 app.js 文件中引入 

 

4.對其進行封裝

 

5.封裝完畢後，可對其進行調用，因爲不同類型的頁面構造函數不一樣，所以引入的寫法不一樣，

（所有的頁面都要先通過getApp函數獲取的App對象再調用其封裝的方法）

正常的Page中：

推薦在onLoad中調用

  onLoad: function (options) {
    const app = getApp()
    app.watch(this)
  },

完整的寫法 在Page構造的頁面中watch的寫法和vue一樣，與data同級

const app = getApp()
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    aaa: 123
  },
  watch:{
    aaa(val){
      console.log('page函數',val)
    }
  },
  onLoad: function (options) {
    app.watch(this)
  },
  onShow: function () {

  },
})

 

組件Component中寫法：

推薦在ready中調用

  ready(){   //類似於beforeMounted 組件掛載前
    const app = getApp()
    app.watch(this)
  },

完整的寫法 在Component構造的組件頁面中，需要將 watch 以函數的形式寫入到 methods 中，並且用return返回

const app = getApp();
Component({
  data:{
    lll:123,
  },
  methods: {
    watch(){
      return{
        lll(val){
          console.log('lll改變成功')
        }
      }
    },
  },
  ready(){   //類似於beforeMounted 組件掛載前
    app.watch(this)
  },
})