# @wxa/watch

npm bundle size (minified + gzip)

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

# 安装

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

1
2

# 用例

在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

在页面类中定义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。

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