【功能上新】小程序自定义组件observers正式发布!

简介: 【功能上新】小程序自定义组件observers正式发布!

“在原有的开发过程中,想要做数据观测,需要在自定义组件的生命周期中加入一些字段,来说明我希望观测哪一个,整个操作比较麻烦,通过自定义组件的observers功能,就可以解决这个问题。”

在5月支付宝开发者日上,支付宝开发者日讲师元凛曾经预告过小程序自定义组件的数据变化观测器(observers)功能,现在正式发布!



解决什么问题?

假设你接到一个诉求,需要在小程序的入口页判断用户是否为新人或者特殊身份用户,以展示对应的专属福利页面,这时候就需要调用身份判断的接口,再展示页面。

以前自定义组件想要实现根据字段变化,动态调用接口,只能通过如derivedDataFromProps / didUpdate来判断,加字段去判断处理,开发过程比较难受。



而现在,而现在只要在observers中很简单地去定义我们观测的字段就行。

怎么使用?



如上图所示,我们可以通过观测X/Y的值,让Z随着X/Y的值变化而调整,或者b.c的变化。

我们也支持b.**的写法,就是当b发生时变化时,就会触发你想处理的一些逻辑,当c变化时也会触发。

如果需要观测所有子数据字段的变化,可以使用通配符 **。

Component({
  options: {
    observers: true,
  },
  observers: {
    '**': function() {
      // 每次 setData 都触发
    },
  },
})


同时,数据变化观测器也适用于小程序页面

更详细的接入流程见开发文档

注意事项:
数据变化观测器从小程序基础库版本 2.8.1 开始支持。
数据变化观测器观测的是 setData 涉及到的数据字段,即使这些数据字段的值没有发生变化,数据监听器依然会被触发。
如果在数据变化观测器函数中使用 setData 设置本身观测的数据字段,可能会导致死循环,需要特别留意。
特别地,当观测的字段为**时,观测器对应入参的值将是 {...this.props, ...this.data}。应尽量避免观测 **,会导致性能受影响。
正常情况下,属性或内部数据的变化都会触发对应字段的观测器函数。但同名字段(字段在属性内与内部数据同时存在),则此时只有 setData 会触发对应字段的观测器。因此,应尽量避免属性和内部数据拥有同名字段。
对于同名字段,可使用生命周期函数 deriveDataFromProps 判断属性是否发生变化。


目录
相关文章
|
26天前
|
小程序 JavaScript
【微信小程序】之轮播图、swiper、swiper-item、banner组件使用
【微信小程序】之轮播图、swiper、swiper-item、banner组件使用
【微信小程序】之轮播图、swiper、swiper-item、banner组件使用
|
27天前
|
小程序
微信小程序如何实现进入小程序自动连WiFi功能
微信小程序如何实现进入小程序自动连WiFi功能
|
2月前
|
存储 小程序 JavaScript
【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)
【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)
|
2月前
|
JSON 小程序 数据格式
【微信小程序】-- 自定义组件总结 (四十)
【微信小程序】-- 自定义组件总结 (四十)
|
2月前
|
小程序 JavaScript
【微信小程序】-- 自定义组件 - behaviors(三十九)
【微信小程序】-- 自定义组件 - behaviors(三十九)
|
2月前
|
JSON 小程序 JavaScript
【微信小程序】-- 自定义组件 - 组件所在页面的生命周期 & 插槽(三十七)
【微信小程序】-- 自定义组件 - 组件所在页面的生命周期 & 插槽(三十七)
|
2月前
|
小程序
【微信小程序】-- 自定义组件 - 纯数据字段 & 组件的生命周期(三十六)
【微信小程序】-- 自定义组件 - 纯数据字段 & 组件的生命周期(三十六)
|
26天前
|
小程序 JavaScript
【微信小程序】之顶部选项卡自定义tabs(不用mp-tabs扩展组件,太难用了)
【微信小程序】之顶部选项卡自定义tabs(不用mp-tabs扩展组件,太难用了)
|
26天前
|
小程序 JavaScript
【微信小程序】之自定义三宫格一行展示row-grid(简单数据看板)
【微信小程序】之自定义三宫格一行展示row-grid(简单数据看板)
|
24天前
|
小程序 程序员
【uniapp微信小程序】自定义导航栏:非首页展示的实现方式(极为快捷方式)
【uniapp微信小程序】自定义导航栏:非首页展示的实现方式(极为快捷方式)
14 0