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 来触发数据更新。