小程序自定义组件扩展 behavior， watch 属性实现（微信小程序如何自定义组件）

小程序自定义组件扩展 behavior， watch 属性实现（微信小程序如何自定义组件）

2019.03.13更新

官方已支持数据监听，详情可查看数据-。 数据-可以用于监听和响应任何属性和数据字段的变化。从小程序基础库版本 2.6.1 开始支持。

watch

小程序自定义组件扩展 behavior，watch 属性实现

使用此 behavior 需要依赖小程序基础库 2.2.3 以上版本，同时依赖开发者工具的 npm 构建。具体详情可查阅官方 npm 文档。

使用方法

安装 watch：

npm install --save miniprogram-watch

作为 behavior 引入

const watchBehavior = require("miniprogram-watch");Component({ behaviors: [watchBehavior], properties: { propA: { type: Number, value: 0 } }, data: { a: 0, b: { c: { d: 33 }, e: [1, 2, [3, 4]] } }, // 可以将需要监听的数据放入 watch 里面，当数据改变时推送相应的订阅事件 // 支持 data 以及 properties 的监听 watch: { propA(val, oldVal) { console.log("propA new: %s, old: %s", val, oldVal); }, a(val, oldVal) { console.log("a new: %s, old: %s", val, oldVal); }, "b.c.d": function(val, oldVal) { console.log("b.c.d new: %s, old: %s", val, oldVal); }, "b.e[2][0]": function(val, oldVal) { console.log("b.e[2][0] new: %s, old: %s", val, oldVal); }, "b.e[3][4]": function(val, oldVal) { console.log("b.e[3][4] new: %s, old: %s", val, oldVal); } }, methods: { onTap() { this.setData({ a: 2, "b.c.d": 3, "b.e[2][0]": 444, c: 123 }); // 不在 data 里面的数据项不会放入观察者列表，比如这里的'b.e[3][4]' } }});

a={{a}}b.c.d={{b.c.d}}b.e[2][0]={{b.e[2][0]}}c={{c}}prop: {{propA}}click

如何在 Page 里使用 watch

参考：《小程序的奇技淫巧之 watch 观察属性》 Tips: Component是Page的超集，《使用 Component 构造器构造页面》

事实上，小程序的页面也可以视为自定义组件。因而，页面也可以使用Component构造器构造，拥有与普通组件一样的定义段与实例方法。但此时要求对应json文件中包含usingComponents定义段。

watch 的实现参考

jayZOU/watch

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。