1. 前言
小程序 组件中 这个
observers属性以前也没玩过,今天也来玩下
2. 是什么 what
3. 应用场景
- 有时，在一些数据字段被 setData 设置时，需要执行一些操作
- 语法
'字段A,字段B': function (字段A的新值, 字段B的新值) { do something }
4. 监听属性
- 例如: this.data.sum 永远是 this.data.numberA 与 this.data.numberB 的和。此时，可以使用数据监听器进行如下实现。
- 其实就是 2 个数 求和 效果,结果时时变化
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. 页面
- 相关代码
<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. 监听对象
- 在vue 2 中有个深度监听的概念,这里监听对象也有一些技巧
// 单个和多个和 属性的变化 '对象.属性A,对象.属性B':function(属性A的新值,属性B的新值){} // 3 种 情况触发监听 //对象.属性 A, setData //对象.属性 B, setData // 直接为对象 setData
7. 监听对象技巧
- 当对象有很多属性时候,我们每个属性都监听也不现实,所以 用
*代表对象的所有属性来实现监听
- 颜色 跟随 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. 问题
- 如果想要一进来就随机色怎么办呢
- 需要再页面加载的时候调用 对应的钩子
- 但这是组件, 组件怎么访问页面的钩子呢
9. 解决
- 组件字段
// 组件钩子 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) } }) }
