# @wxa/watch

NPM version npm bundle size (minified + gzip)

watch插件基于melanke-watchjs实现,本插件只是简单包装,以适配小程序环境。

# 安装

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

# 用例

  1. app.js/app.wxa中引入后注册。
// app.js or app.wxa
import {App, wxa} from '@wxa/core';
import watchPlugin from '@wxa/watch';

wxa.use(watchPlugin);

@App
export default class Main {};
1
2
3
4
5
6
7
8
  1. 在页面类中定义watch对象,指定需要监听的数据。
import {Page} from '@wxa/core';

@Page
export default class Index {
    data = {
        formData: {
            name: '',
            email: ''
        }
    }
    watch = {
        formData(newValue) {
            // 判断表单数据是否为空
            let isValid = !!Object.keys(newValue).find((key)=>!newValue[key]);
            this.setData({isValid})
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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

注意

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

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