微信小程序如何监听数据变化在Vue2项目中监听数据我们可以使用watch, 在Vue3中监听数据变化，我们可以使用wat

小程序文章推荐：

在Vue2项目中监听数据我们可以使用watch, 在Vue3中监听数据变化，我们可以使用watch和 watchEffect。那么在微信小程序中我们怎样监听数据的变化呢？

一、监听基础数据类型变化

在微信小程序中监听数据的变化，需要在组件的propertiers 或者在data 中定义数据，然后通过observers来进行监听，具体使用方式如下：

在根目录新建components目录，再在components 目录新建test目录，选中test 目录右键新建Component。
编写test.js


Component({

    /**
     * 组件的属性列表
     */
    properties: {
        num1: {
            type: Number,
            value: 1
        }
    },

    /**
     * 组件的初始数据
     */
    data: {
        num2: 2,
        sum: 3
    },
    observers: {
        'num1,num2': function (num1, num2) {
            console.log(num1, num2)
            this.setData({
                sum: num1 + num2
            })
        }
    },

    /**
     * 组件的方法列表
     */
    methods: {
        addnum2 () {
            this.setData({
                num2: ++this.data.num2
            })
        }
    }
})

在这个文件中：

我们在properties中定义了num1 由外界传递
在data中定义了，num2, num3
在methods 中定义了addnum2方法来修改data中num2的值
重点在observers 中，监听了num1, num2的变化，当两者由一个变化时，我们重新给sum 进行赋值为num1加num2的和。这里可以看出，当我们想要监听多个数据变化，进行一个逻辑的时候，可以以逗号分隔来监听多个值。回调函数中，参数值分别和监听的顺序对应。

test.wxml

<view>
    {{num1}} + {{ num2 }} = {{ sum }}
    <button type="primary" bindtap="addnum2">点击num2+1</button>
</view>

在pages/index/index.json中注册 test 组件

{
    "usingComponents": {
        "my-test": "/components/test/test"
    }
}

index.js


Page({
    data: {
        num1: 3
    },
    addnum1 () {
        this.setData({
            num1: ++this.data.num1
        })
        console.log(this.data.num1)
    }
})

在这个文件中定义了num1和修改num1的方法

index.wxml

<view>
    <my-test num1="{{num1}}"></my-test>
    <button type="primary" bindtap="addnum1" style="margin-top:10px">点击num1+1</button>
</view>

在这个文件中通过自定义属性num1将num1 的值传递给test组件

运行效果：

初始化时：

点击num1+1按钮：

可以看到num1的值变化了，sum的值也变化了，符合预期

点击num2+1按钮：

可以看到num2 和sum 都变化了符合预期。

二、监听对象属性的变化

1. 监听对象指定属性的变化

test.js 改成如下内容：


Component({
    info: {
        name: '小明',
        age: 28
    },
    observers: {
        'info.name, info.age': function (name, age){
            console.log(name, age)
        }
    },
    lifetimes: {
        created () {
            setTimeout(() => {
                this.setData({
                    'info.name': '小军',
                    'info.age': 30
                })
            }, 3000)
        }
    }
})

观察控制台，可以看到3秒后打印出了变化后的值。

从这个例子可以看出，监听对象的属性，可以通过对象点属性的方式，监听多个以逗号隔开，回调函数的参数顺序和监听顺序一样，修改属性的时候同样通过对象点属性名的方式。

2. 监听对象所有属性的变化

在微信小程序中监听对象所有属性的变化，使用对象.**的方式

将test.js中的observers改成如下代码

observers: {
        'info.**': function (info){
            console.log(info)
        }
    },

观看结果：

3s 后可以看到控制台也打印出了变化后的结果，打印的是整个对象，说明监听整个对象的时候，回调函数中的参数值是整个对象。

三、总结

本篇介绍了在微信小程序中如何监听基本数据类型，如何监听对象指定属性的变化，还介绍了监听对象上所有属性的方式。根据监听到的数据变化，我们可进行我们需要的逻辑处理。相信有了observers数据监听，在微信小程序开发中你会更加顺利。

微信小程序如何监听数据变化

一、 监听基础数据类型变化

二、监听对象属性的变化

1. 监听对象指定属性的变化

2. 监听对象所有属性的变化

三、总结

一、监听基础数据类型变化