创新互联百度小程序教程：数据监听器

  • 数据监听器
    • 使用数据监听器
    • 监听字段语法
      • Bugs & Tips

    数据监听器

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

    我们提供的服务有：网站设计、成都网站制作、微信公众号开发、网站优化、网站认证、枣庄ssl等。为1000多家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的枣庄网站制作公司

    使用数据监听器

    有时，需要组合监听一些数据字段。

    例如，this.data.sum永远是 this.data.numberA与this.data.numberB的和。此时，可以使用数据监听器进行如下实现。

    代码示例

    在开发者工具中预览效果

    • JS
     
 
 
      
  
  
  
    1. Component({
      2.   
  
  
    2.  properties: {
      3.   
  
  
    3.  numberA: {
      4.   
  
  
    4.  type: Number,
      5.   
  
  
    5.  value: 0
      6.   
  
  
    6.  },
      7.   
  
  
    7.  numberB: {
      8.   
  
  
    8.  type: Number,
      9.   
  
  
    9.  value: 0
      10.   
  
  
    10.  }
      11.   
  
  
    11.  },
      12.   
  
  
    12.  attached: function() {
      13.   
  
  
    13.  this.setData({
      14.   
  
  
    14.  numberA: 1,
      15.   
  
  
    15.  numberB: 2
      16.   
  
  
    16.  })
      17.   
  
  
    17.  },
      18.   
  
  
    18.  observers: {
      19.   
  
  
    19.  'numberA, numberB': function (numberA, numberB) {
      20.   
  
  
    20.  // 在 numberA 或者 numberB 被设置时，执行这个函数
      21.   
  
  
    21.  this.setData({
      22.   
  
  
    22.  sum: numberA + numberB
      23.   
  
  
    23.  })
      24.   
  
  
    24.  }
      25.   
  
  
    25.  }
      26.   
  
  
    26. });
      27.

    监听字段语法

    数据监听器支持监听属性或内部数据的变化，可以同时监听多个。一次setData最多触发每个监听器一次。

    同时，监听器可以监听子数据字段，如下例所示。

    代码示例

    • JS
     
 
 
      
  
  
  
    1. Component({
      2.   
  
  
    2.  observers: {
      3.   
  
  
    3.  'some.subfield': function(subfield) {
      4.   
  
  
    4.  // 使用 setData 设置 this.data.some.subfield 时触发
      5.   
  
  
    5.  // （除此以外，使用 setData 设置 this.data.some 也会触发）
      6.   
  
  
    6.  subfield === this.data.some.subfield
      7.   
  
  
    7.  },
      8.   
  
  
    8.  'arr[12]': function(arr12) {
      9.   
  
  
    9.  // 使用 setData 设置 this.data.arr[12] 时触发
      10.   
  
  
    10.  // （除此以外，使用 setData 设置 this.data.arr 也会触发）
      11.   
  
  
    11.  arr12 === this.data.arr[12]
      12.   
  
  
    12.  },
      13.   
  
  
    13.  }
      14.   
  
  
    14. });
      15.

    如果需要监听所有子数据字段的变化，可以使用通配符**。

    • JS
     
 
 
      
  
  
  
    1. Component({
      2.   
  
  
    2.  observers: {
      3.   
  
  
    3.  'some.field.**': function(field) {
      4.   
  
  
    4.  // 使用 setData 设置 this.data.some.field 本身或其下任何子数据字段时触发
      5.   
  
  
    5.  // （除此以外，使用 setData 设置 this.data.some 也会触发）
      6.   
  
  
    6.  field === this.data.some.field
      7.   
  
  
    7.  },
      8.   
  
  
    8.  },
      9.   
  
  
    9.  data: {
      10.   
  
  
    10.  some: {
      11.   
  
  
    11.  field: {
      12.   
  
  
    12.  subfield: [1, 2, 3]
      13.   
  
  
    13.  }
      14.   
  
  
    14.  }
      15.   
  
  
    15.  },
      16.   
  
  
    16.  attached: function() {
      17.   
  
  
    17.  // 会触发 observers
      18.   
  
  
    18.  this.setData({
      19.   
  
  
    19.  'some.field': {}
      20.   
  
  
    20.  });
      21.   
  
  
      22.   
  
  
    22.  // 会触发 observers
      23.   
  
  
    23.  // this.setData({
      24.   
  
  
    24.  // 'some.field.xxx': {}
      25.   
  
  
    25.  // });
      26.   
  
  
      27.   
  
  
    27.  // 会触发 observers
      28.   
  
  
    28.  // this.setData({
      29.   
  
  
    29.  // 'some': {}
      30.   
  
  
    30.  // });
      31.   
  
  
    31.  }
      32.   
  
  
    32. });
      33.

    特别地，仅使用通配符**可以监听全部setData。

    • JS
     
 
 
      
  
  
  
    1. Component({
      2.   
  
  
    2.  observers: {
      3.   
  
  
    3.  '**': function(value) {
      4.   
  
  
    4.  // 数据发生变化即触发，这里的 value 是 properties 和 data 的合集
      5.   
  
  
    5.  }
      6.   
  
  
    6.  }
      7.   
  
  
    7. })
      8.

    Bugs & Tips

    • 数据监听器监听的是setData中涉及的数据字段，并且只有这些字段发生改变时才会触发，类似observer;
    • 在数据监听器中再次进行setData设置被监听的字段，可能会造成循环监听，请注意使用；
    • 由于小程序对setData进行了优化操作，所以如果同步的多次设置setData那么实际上只会执行最后一次setData引起的observers。

    代码示例

    • JS
     
 
 
      
  
  
  
    1. Component({
      2.   
  
  
    2.  properties: {
      3.   
  
  
    3.  numberA: {
      4.   
  
  
    4.  type: Number,
      5.   
  
  
    5.  value: 0
      6.   
  
  
    6.  },
      7.   
  
  
    7.  numberB: {
      8.   
  
  
    8.  type: Number,
      9.   
  
  
    9.  value: 0
      10.   
  
  
    10.  }
      11.   
  
  
    11.  },
      12.   
  
  
    12.  attached: function() {
      13.   
  
  
    13.  this.setData({
      14.   
  
  
    14.  numberA: 1,
      15.   
  
  
    15.  numberB: 2
      16.   
  
  
    16.  });
      17.   
  
  
    17.  this.setData({
      18.   
  
  
    18.  numberA: 2,
      19.   
  
  
    19.  numberB: 3
      20.   
  
  
    20.  })
      21.   
  
  
    21.  },
      22.   
  
  
    22.  observers: {
      23.   
  
  
    23.  'numberA, numberB': function (numberA, numberB) {
      24.   
  
  
    24.  // 在 numberA 或者 numberB 被设置时，执行这个函数
      25.   
  
  
    25.  this.setData({
      26.   
  
  
    26.  sum: numberA + numberB
      27.   
  
  
    27.  })
      28.   
  
  
    28.  }
      29.   
  
  
    29.  }
      30.   
  
  
    30. });
      31.

    以上只会执行一次observers。

    网站标题：创新互联百度小程序教程：数据监听器
    分享地址：http://www.csdahua.cn/qtweb/news31/232931.html

    网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网

    成都快上网为您推荐相关内容

    网站营销知识

    同城分类信息

    成都移动机房　　 　联通服务器托管　　 　广汉锦华建材　　 　成都广告安装公司　　 　温江做网站　　 　众诚伟业　　 　电信机房托管　　 　四川主机托管　　 　兴发搬家　　 　重庆服务器托管　　 　电信内江机房　　 　成都光华机房　　 　网站SEO优化　　 　梦港之夜　　 　光华村机房　　 　成都网站制作　　 　成都网站营销推广　　 　成都二枢机房　　 　明安消防器材　　 　恒翔机电