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
来触发数据更新。
转载于:https://www.cnblogs.com/ifantastic/p/9967753.html
miniprogrampatch 提供 watch 和 computed 特性相关推荐
- F# 4.5提供Spans、Match!等特性
F# 4.5预览版现已发布,其中提供了一系列新特性,包括对.NET Core 2.1的新原生类型Span\u0026lt;T\u0026gt;的支持.新关键字Match!等. \\ 类型Span意在实 ...
- php v5.,PHP V5.3 中的新特性,第 5 部分- 从 PHP V5.2 升级到 PHP V5.3
PHP V5.3 中的新特性,第 5 部分: 从PHP V5.2 升级到 PHP V5.3 1 2 3 4 5 下一页 PHP V5.3 将于不久后发布."PHP V5.3 中的新特性&qu ...
- Servlet 3.0 新特性概述
Servlet 3.0 新特性概述 Servlet 3.0 作为 Java EE 6 规范体系中一员,随着 Java EE 6 规范一起发布.该版本在前一版本(Servlet 2.5)的基础上提供了若 ...
- Imagination推出全新多核GPU IP系列:提供33种不同配置,AI算力达24 TOPS
近日,致力于打造半导体和软件知识产权(IP) Imagination Technologies宣布推出全新的IMG B系列(IMG B-Series)图形处理器(GPU),进一步扩展了其GPU知识产权 ...
- 允许使用抽象类类型 isearchboxinfo 的对象_Java新手必学:面向对象的特性都有哪些?...
面向对象是Java基础阶段最重要的知识点.那么面向对象到底有哪些特性你都知道吗? 今天我们就来具体学习一下Java面向对象的特性. 1.封装: 封装给对象提供了隐藏内部特性和行为的能力.外部无法直接访 ...
- Spring Boot特性
2019独角兽企业重金招聘Python工程师标准>>> SpringApplication SpringApplication类提供了一种从main()方法启动Spring应用的便捷 ...
- Entity Framework Core 2.0的新特性
虽然EF Core 2.0存在大量槽点,但是它也给出了不少亮点.在本文中,我们将介绍这次发布版的部分亮点. \\ 数据库表切分(Table Splitting) \\ ORM常被吐槽是总是对所请求数据 ...
- 苹果向App Analytics添加新的指标和特性
近日,苹果在开发者邮件列表中宣布,最近推出的App Analytics服务现在提供了一些新特性,有助于深入了解应用崩溃次数.付费用户量和指标比值.在WWDC 2015大会上,苹果对这些新特性进行过非常 ...
- Entity Framework 4.3 中的新特性
原文地址:http://www.cnblogs.com/supercpp/archive/2012/02/20/2354751.html EF4.3于2月9号正式发布了,微软的EF小组最近一年开始发力 ...
- Spring2.5的新特性
第一部分 简介 从诞生之初,Spring框架就坚守它的宗旨:简化企业级应用开发,同时给复杂问题提供强大的.非侵入性解决方案.一年前发布的Spring2.0就把这些主题推到了一个新的高度.XML Sch ...
最新文章
- MySQL Workbench导出数据库
- RUNOOB python练习题 32 列表的中括号符号小tips
- 如何给FLV文件加字幕
- CentOS 上snmp的安装和配置
- WPF仿微信界面发送消息简易版
- 【python】进程与线程
- “色情机器”改掉手机PIN码 勒索安卓设备用户
- Maven实战读书笔记
- 微积分(二)——曲线积分与曲面积分笔记
- 无缘无故的推荐弹窗,wps的锅,解决办法
- 【数据分析】2种常见的反爬虫策略,信息验证和动态反爬虫
- 通向架构师的道路(第三天)之apache性能调优 (转)
- 3dmax和python做3d动画_3D动画和影视建模,用什么软件或者多个什么软件结合做比较好?...
- ResponseEntity下载
- Android 上传头像(文件)到服务器
- Android 使用 Ant 批量打包
- 安可信esp32 python_ESP8266这么火红背后不得不说的六个理由
- 牛客每日练习----骑行川藏,Lucky Coins,不凡的夫夫
- pytest之标记会失败的测试:pytest.mark.xfail
- Visual Studio 2015正式版/产品密钥