1. 前言

小程序 组件中 这个observers 属性以前也没玩过,今天也来玩下

---

2. 是什么 what

1. 组件 数据字段监听器，用于监听 properties 和 data 的变化,具体参考 数据监听器

2. 也就是说页面是没有的,和behaviors 一样

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

4. 其实类似 vue 中的监听 /watch

---

3. 应用场景

1. 有时，在一些数据字段被 setData 设置时，需要执行一些操作

• 语法

         '字段A,字段B': function (字段A的新值, 字段B的新值) {
        do something
         }

4. 监听属性

2. 例如: this.data.sum 永远是 this.data.numberA 与 this.data.numberB 的和。此时，可以使用数据监听器进行如下实现。
3. 其实就是 2 个数 求和 效果,结果时时变化
4. 

Component({
  attached: function() {
    this.setData({
      numberA: 1,
      numberB: 2,
    })
  },
    methods: {
        addNum1() {
            this.setData({
                num1: this.data.numberA + 1
            })
        },
        addNum2() {
            this.setData({
                num2: this.data.numberB + 1
            })
        },
},
  data: {
     numberA:600,
     numberB:300
},
  observers: {
    'numberA, numberB': function(numberA, numberB) {
      // 在 numberA 或者 numberB 被设置时，执行这个函数
      this.setData({
        sum: numberA + numberB
      })
    }
  }
})

---

5. 页面

1. 相关代码

<view class="my-title">监听-data</view>
<view class="my-box">
    <button type="primary" bindtap="addNum1"> 添加:numA--{{numberA}}</button>
    <button type="primary" bindtap="addNum2"> 添加:numB--{{numberB}}</button>
    结果{{sum}}
</view>

---

6. 监听对象

1. 在vue 2 中有个深度监听的概念,这里监听对象也有一些技巧

        // 单个和多个和 属性的变化
         '对象.属性A,对象.属性B':function(属性A的新值,属性B的新值){}
        //  3 种 情况触发监听
        //对象.属性 A, setData
        //对象.属性 B, setData
        // 直接为对象 setData

---

7. 监听对象技巧

1. 当对象有很多属性时候,我们每个属性都监听也不现实,所以 用*代表对象的所有属性来实现监听

• 颜色 跟随 rgb的改变而改变 ,observers 核心代码

    /**
     * 数据监听器:用于监听和响应任何属性和数据字段的变化,从而执行特定的操作
     * 
     * 类似 vue中的 watch 侦听器
     */
    observers: {
        // '字段A,字段B': function (字段A的新值, 字段B的新值) {
        // do something
        // }
        // 单个和多个和 属性的变化
        // '对象.属性 A,对象.属性B':function(属性A的新值,属性B的新值){}
        //  3 种 情况触发监听
        //对象.属性 A, setData
        //对象.属性 B, setData
        // 直接为对象 setData
        // "rgb.r,rgb.g,rgb.b":function(r,g,b){
        //     console.log("b:",b);
        //     this.setData({
        //         fullColor:`${r},${g},${b}`
        //     })
        // },
        // * 通配符 来监听 对象中的所有属性
        "rgb.**": function (obj) {
            console.log("obj:", obj);
            this.setData({
                fullColor: `${obj.r},${obj.g},${obj.b}`
            })
        },
    },
    data: {
        rgb: {
            r: 0,
            g: 0,
            b: 0
        },
        fullColor: '0,0,0'
    },

• rgb改变方法相关代码
  注意组件 写到 methods里面

        changeR() {
            this.setData({
                'rgb.r': this.data.rgb.r + 5 > 255 ? 255 : this.data.rgb.r + 5
            })
        },
        changeG() {
            this.setData({
                'rgb.g': this.data.rgb.g + 5 > 255 ? 255 : this.data.rgb.g + 5
            })
        },
        changeB() {
            this.setData({
                'rgb.b': this.data.rgb.b + 5 > 255 ? 255 : this.data.rgb.b + 5
            })
        },

• 页面使用

<view class="my-title">监听-对象</view>
<view class="my-box"  >
    <button type="primary" bindtap="changeR">R {{rgb.r}}</button>
    <button type="primary" bindtap="changeG">G {{rgb.g}}</button>
    <button type="primary" bindtap="changeB">B {{rgb.b}}</button>
    {{fullColor}}
    <view style="background-color: rgb({{fullColor}});height:60px">背景色:</view>
</view>

---

8. 问题

1. 如果想要一进来就随机色怎么办呢
2. 需要再页面加载的时候调用 对应的钩子
3. 但这是组件, 组件怎么访问页面的钩子呢

9. 解决

1. 组件字段

// 组件钩子
    lifetimes:{},
// 页面钩子
    pageLifetimes:{
        show(){
            console.log("show");
            // 随机色
            // this.randomColor()
        },
        hide(){
            console.log("hide");
        },
        resize(){
            console.log("resize");
        }
    }

• 随机色 组件的 methods里面

        randomColor(){
            this.setData({
                rgb:{
                    r: parseInt(Math.random()*256),
                    g: parseInt(Math.random()*256),
                    b: parseInt(Math.random()*256)
                }
            })
        }

---

参考资料

Component 字段
数据监听器

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉