推薦一個小程式補丁 miniprogrampatch.js，為你的 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 來觸發資料更新。