微信小程序（组件的数据监听）

2b勿扰 2019-12-23 20:51:39

23139

分类专栏：小程序

最后发布:2019-12-23 20:51:39首次发布:2019-12-23 20:51:39

本文链接：https://blog.csdn.net/weixin_41181778/article/details/103673200

版权

// component/my-obs/my-obs.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    dataA:{
      type:String,
      value:'xxxxx',
      observer:function(newVal,oldVal,change){
        console.log(newVal, oldVal, change)
      }
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    num:1,
    movie:{
      name:'eric'
    }
  },

  observers:{
    'num':function(num){
      console.log(num)
    },
    'movie.name':function(name){
      console.log(name)
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    increase(){
      // this.setData({
      //   num:1
      // })
      this.setData({
        movie:{
          name:'eric',
          title:'标题'
        }
      })
    }
  }
})

注意：observers 的监听方式和小程序工具包中watch 不同。observers 设置数据就会触发，watch数据变化才会触发，以下是额外扩展的weui和工具包的使用

：

// component/my-conp/my-conp.js
const computedBehavior = require('miniprogram-computed')
// Component({
//   behaviors: [computedBehavior],
//   data: {
//     a: 1,
//     b: 1,
//   },
//   computed: {
//     sum(data) {
//       // 注意： computed 函数中不能访问 this ，只有 data 对象可供访问
//       // 这个函数的返回值会被设置到 this.data.sum 字段中
//       return data.a + data.b
//     },
//   },
//   methods: {
//     onTap() {
//       this.setData({
//         a: this.data.b,
//         b: this.data.a + this.data.b,
//       })
//     }
//   }
// })
Component({
  behaviors: [computedBehavior],
  data: {
    a: 1,
    b: 1,
    sum: 2,
  },
  watch: {
    'a, b': function (a, b) {
      this.setData({
        sum: a + b
      })
    },
  },
  methods: {
    onTap() {
      this.setData({
        a: this.data.b,
        b: this.data.a + this.data.b,
      })
    }
  }
})