@wxa/watch

NPM versionWatch 数据监听 - 图2 npm bundle size (minified + gzip)

watch插件基于melanke-watchjsWatch 数据监听 - 图4实现,本插件只是简单包装,以适配小程序环境。

安装

  1. # 使用npm安装
  2. npm i -S @wxa/watch

用例

  1. app.js/app.wxa中引入后注册。
  1. // app.js or app.wxa
  2. import {App, wxa} from '@wxa/core';
  3. import watchPlugin from '@wxa/watch';
  4. wxa.use(watchPlugin);
  5. @App
  6. export default class Main {};
  1. 在页面类中定义watch对象,指定需要监听的数据。
  1. import {Page} from '@wxa/core';
  2. @Page
  3. export default class Index {
  4. data = {
  5. formData: {
  6. name: '',
  7. email: ''
  8. }
  9. }
  10. watch = {
  11. formData(newValue) {
  12. // 判断表单数据是否为空
  13. let isValid = !!Object.keys(newValue).find((key)=>!newValue[key]);
  14. this.setData({isValid})
  15. }
  16. }
  17. }

使用watch,我们可以替代一部分.wxs的能力,实现类似computed的特性。

注意

数据监听只对提前定义在data中的数据有效,后续动态添加的数据都无法监听,比如例子中的isValid

可以监听数组本身,但不能监听数组新增的项。