微信小程序observers数据监听器的使用

微信小程序observers数据监听器的使用

数据监听器可以用于监听和响应任何属性和数据字段的变化。

1、observers使用的前提条件

在微信小程序中数据监听器的使用是有几个前提条件的，否则是无法使用的

• 小程序的基本版本库要达到要求，从小程序基础库版本 2.6.1 开始支持。
• 只能使用在自定义组件中，在页面中是无法使用的

2、如何使用

observers 在自定组件的使用有两个不同位置进行监听数据的变化，而不同的位置，所监听的数据也是不一样的。

在自定义组件的properties中的数据属性

此处是监听父组件传过来数据的变化，达到引起该子组件数据变动及重新渲染

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 产品详情
    productDetail: {
      type: Object,
      value: {},
      observer(newVal,oldVal) {// 数据监听
        console.log("newVal", newVal);
      },
    },
  },
  data: {},
});

Component内的属性（与properties同一层级）

放在此处是，可监听当前子组件内data、props内数据的变动。" ** "为通配符，可监听所有数据的变动

Component({
  properties: {
  	 productList: {
      type: Array,
      value: [],
    },
  },
  data: {
	dataVal:''
  },
  lifetimes: {
  	 attached() {
      const {dataVal,productList} = this.data
		this.setData({
			dataVal:"zhou",
			productList:[]
		})
    },
  },
  observers: {
    productList: function (val) {//监听productList变动
      console.log(val)
    },
    '**': function() {// 每次 setData 都触发
      console.log("this.data")
    },
  },
});