推荐一个小程序补丁 miniprogrampatch.JS https://github.com/hendiko/miniprogrampatch.git , 为你的 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 来触发数据更新.
来源: https://www.cnblogs.com/ifantastic/p/9967753.html