小程序中监听属性--监听字段语法

2024-01-08 11:30:19

数据监听器支持监听属性或内部数据的变化,可以同时监听多个。一次 setData 最多触发每个监听器一次。同时,监听器可以监听子数据字段,如下例所示。

<view class="container">
  <view>username: {{userInfo.username}}</view>
  <view>sex: {{userInfo.sex}}</view>
  <view>arrJoin: {{arrJoin}}</view>
</view>

<button bind:tap="changeValue">设置username为plum,arr[2]为10</button>
Component({
  data: {
    userInfo: {
      username: 'little',
      sex: 'female'
    },
    arr: [1,2,3,4,5,6],
  },
  lifetimes: {
    attached(){
      this.setData({
        arrJoin: this.data.arr.join(',')
      })
    }
  },
  observers: {
    'userInfo.username': function(username) {
      // 使用setData设置this.data.userInfo.username时触发 使用setData设置this.data.userInfo也会触发
      console.log(username);
    },

    'arr[2]': function(arr2) {
      // 使用setData设置this.data.arr[2]时触发 使用setData设置this.data.arr也会触发
      console.log(arr2);
      console.log(this.data.arr);
      this.setData({
        arrJoin: this.data.arr.join(',')
      }) 
      // this.setData({arr: this.data.arr})   //监听中设置监听数据字段会死循环
    },
    
    // 如果需要监听所有子数据字段的变化,可以使用通配符 ** 。
    'userInfo.**': function(userInfo) {
      // 使用setData设置this.data.userInfo.username时触发 使用setData设置this.data.userInfo也会触发
      console.log(userInfo);
    },
    
    // 特别地,仅使用通配符 ** 可以监听全部 setData 。
    '**': function(data) {
    // 使用setData设置this.data.userInfo.username时触发 使用setData设置this.data.userInfo也会触发
       console.log(data);
     },
  },

  /**
   * 组件的方法列表
   */
  methods: {
    changeValue(){
       this.setData({
         'userInfo.username': 'plum',
         'arr[2]': 10
       })
    }
  }
})

注意事项
1、数据监听器监听的是 setData 涉及到的数据字段,即使这些数据字段的值没有发生变化,数据监听器依然会被触发。
2、如果在数据监听器函数中使用 setData 设置本身监听的数据字段,可能会导致死循环,需要特别留意。
3、在组件实例进入页面节点树时设置字段值,observers也会被触发执行。
4、数据监听器和属性的 observer 相比,数据监听器更强大且通常具有更好的性能。

文章来源:https://blog.csdn.net/qq_45290368/article/details/135451833
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。