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