miniprogrampatch 提供 watch 和 computed 特性

推薦一個小程序補丁 github:miniprogrampatch，爲你的 Page 和 Component 增長 watch 和 computed 特性。

安裝

經過 npm 安裝：npm install --save miniprogrampatch。

或者直接拷貝 miniprogrampatch.js 到項目中。

用法

miniprogrampatch.js 很是簡單，它只有兩個函數 patchPage 和 patchComponent。

假定你的項目目錄結構以下：

• app.js
• miniprogrampatch.js
• pages/
  • index/index.js
• components/
  • MyComponent/index.js

在 app.js 中：

const { patchPage, patchComponent } = require('./miniprogrampatch');

App({
    // 公共依賴經過 app.deps 來提供
    deps: {
        patchPage, patchComponent
    }
})

在 pages/index/index.js 中：

const { patchPage } = getApp().deps;

patchPage(Page)({
    computed: {
        // 定義計算屬性
    },
    
    watch: {
        // 定義 watch 回調
    }
})

同理，在 components/MyComponents/index.js 中：

const { patchComponent } = getApp().deps;

patchComponent(Component)({
    computed: {
        // 定義計算屬性
    },
    
    watch: {
        // 定義 watch 回調
    }
})

若是你想在已有項目中使用 miniprogrampatch，但又擔憂引入新的第三方代碼影響整個項目，那麼你能夠經過以上方法爲單個頁面或組件增長新特性。

若是你想整個項目全部頁面和組件都使用新特性，又不想在每一個頁面或組件逐個引用 patchPage 或 patchComponent，那麼能夠經過如下示例爲整個項目添加補丁。

在 app.js 中：

const { patchPage, patchComponent } = require('./miniprogrampatch');

// 讓全部頁面或組件均可以直接定義 watch 和 computed
Page = patchPage(Page);
Component = patchComponent(Component);


App({})

定義 computed

Page({

    data: {
        count: 10
    },

    computed: {
        /** 頁面加載的時間戳（不依賴其餘屬性） */
        timestamp() {
            return Date.now();
        },

        /** count 乘以 10（依賴屬性 count） */
        countByTen: {
            require: ['count'],
            fn({ count }) {
                return count * 10
            }
        },

        /** count 乘以 100（依賴另外一個計算屬性 countByTen）*/
        countByHundred: {
            require: ['countByTen'],
            fn({ countByTen }) {
                return countByTen * 10;
            }
        },
        
        /** 計算屬性也能夠是嵌套的路徑 */
        'x.y.z': {
            require: ['countByHundred'],
            fn({ countByHundred }) {
                return countByHundred;
            }
        }
    }
});

在 computed 中經過 key:value 形式來定義計算屬性。

• key：計算屬性名稱或路徑。
• value：
  • 若是 value 爲 function，函數計算結果即爲屬性值。
  • 若是 value 爲 plain object，它必須有一個名爲 fn 字段做爲計算函數。可選字段 require 必須是一個數組，數組內顯式指定當前計算屬性所依賴的其餘屬性名稱或路徑。

注意：

• 全部沒有指定依賴字段的計算屬性（即未提供 require 字段），僅在初始化時求一次值，以後將不會有任何變化。
• 計算屬性非只讀，它能夠被 setData 方法賦值，但每次它依賴的屬性發生變化，它會被從新計算賦值。
• 計算屬性在每次數據更新時檢查是否要從新計算，計算結果和更新數據合併一塊兒被設置到 this.data 中，這一過程是同步處理。

定義 watch

Page({
    watch: {
        // 嵌套路徑監聽
        'x.y': function (value, old) {
            console.log('x.y', value === old); 
        },

        // 監聽屬性
        x(value, old) {
            console.log('x', value === old); 
        },
    }
})

watch 就比較簡單了，定義你想要監聽的屬性名稱或路徑，若是被監聽屬性發生變化就觸發回調函數。

$setData

別名：updateData

被 patch 過的 Page 或 Component 實例 this 擁有一個名爲 $setData 的方法，用來設置 data 同時觸發 computed 屬性更新以及 watch 監聽檢查。

在微信小程序基礎庫 v2.2.2 如下版本，Page 或 Component 的 setData 方法因爲會被定義爲只讀屬性，沒法覆寫，所以必須使用 $setData 來觸發數據更新檢查。

在微信小程序基礎庫 v2.2.3 以上版本，Page 和 Component 的 setData 等效於 $setData，能夠直接使用 setData 來觸發數據更新。