自定义组件-数据监听器

数据监听器

官方文档地址：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/observer.html

• 数据监听器可以用于监听和响应任何属性和数据字段的变化，从小程序基础库版本 2.6.1 开始支持。

何时使用数据监听器

有时，数据被setData设置时，需要执行一些操作。那么数据监听器就可以监听数据被setData改变。

通俗点，在使用setDate改变数据时，数据监听器就可以感知到，然后就可以做一些操作。

注意点

• 数据监听器支持监听属性或内部数据的变化，可以同时监听多个。一次 setData 最多触发每个监听器一次。
• 数据监听器监听的是 setData 涉及到的数据字段，即使这些数据字段的值没有发生变化，数据监听器依然会被触发。
• 如果在数据监听器函数中使用 setData 设置本身监听的数据字段，可能会导致死循环，需要特别留意。
• 数据监听器和属性的 observer 相比，数据监听器更强大且通常具有更好的性能。

代码实操

// components/observes/observes.js
Component({
    properties: {
        testProp:{
            type: String,
            value: 'testProp'
        }
    },
    data: {
        testData:"testData",
        arr:[0,1,2],
        obj:{
            name: 'tan',
            score:[1,2,3]
        }
    },
    lifetimes:{
        attached:function(){
            this.setData({
                testData:'changeTestData',
                testProp:"changeTestProp",
                arr:[3,4,5],
                // 改变数组的某一项
                "arr[0]":12,
                obj: {
                    name:'luo',
                    score:[4,5,6]
                }
            })
        }
    },
    // 数据监听器
    observers:{
        // 监听谁就写谁，参数就是改变后的值
        "testData":function(testData){
            console.log("testData改变为",testData);
        },
        "testProp":function(testProp){
            console.log("testProp改变为",testProp);
        },
        "testData,testProp":function(testData,testProp){
            console.log("testData,testProp改变为",testData,testProp);
        },
        // 监听所有通过setData改变的数据
        "**":function(val){
            console.log(val);
            // {testData: "changeTestData", testProp: "changeTestProp"}
        },
        // 监听数组，这样写监听不到改变数组的某项的值
        "arr":function(arr){
            console.log(arr);
            // [3, 4, 5]
        },
        // 监听数组的某一项，数组引用发生改变也是会监听到的
        "arr[0]":function(arg){
            console.log(arg);
            // 3
        },
        // 监听对象
        "obj":function(obj){
            console.log(obj);
        },
        "obj.score[0]":function(arg){
            console.log(arg);
        },
        "obj.score.**":function(arg){
            console.log(arg);
        },
        "obj.name":function(arg){
            console.log(arg)
        },
        // 这样写会报错
        // "obj[name]":function(arg){
        //     console.log(arg);
        // }
    },
})