九州体育下载
  咨询电话:15369682384

九州体育地址

miniprogrampatch 提供 watch 和 computed 特性

推荐一个小程序补丁 miniprogrampatch.js,为你的 PageComponent 增加 watchcomputed 特性。

安装

通过 npm 安装:npm install --save miniprogrampatch

或者直接拷贝 miniprogrampatch.js 到项目中。

用法

miniprogrampatch.js 非常简单,它只有两个函数 patchPagepatchComponent

假定你的项目目录结构如下:

app.jsminiprogrampatch.jspages/index/index.jscomponents/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 和 computedPage = 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:如果 valuefunction,函数计算结果即为属性值。如果 valueplain 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 来触发数据更新。