【功能上新】小程序自定义组件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 判断属性是否发生变化。


目录
相关文章
|
14天前
|
小程序 数据可视化 JavaScript
微信小程序:轻松实现时间轴组件
本文介绍了如何在微信小程序中实现一个可视化时间轴组件。该组件适用于展示用户资金流动、投资结算等时间节点,帮助用户直观了解资金去向。时间轴支持自定义节点形状、显示序号、倒序排列等功能,并通过插槽灵活定义动态内容。文中详细介绍了组件的设计与使用方法,以及如何结合动态 slot 实现自定义操作。该组件为展示用户资金信息提供了美观、易用的解决方案。
40 1
微信小程序:轻松实现时间轴组件
|
13天前
|
小程序
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
150 1
|
14天前
|
存储 自然语言处理 小程序
微信小程序多语言切换神器:简繁体切换功能完全指南
随着全球化的发展,支持多种语言的应用程序愈发重要。本文介绍了如何在微信小程序中实现简体与繁体字体之间的切换功能,以满足不同地区用户的需求。通过创建utils文件夹并编写相应的转换函数,开发者可以方便地实现语言切换,从而提升用户体验。文章中还附带了示例代码和效果图,帮助读者更好地理解和应用这一功能。
60 0
微信小程序多语言切换神器:简繁体切换功能完全指南
|
14天前
|
小程序 搜索推荐 API
微信小程序:自定义关注公众号组件样式
尽管关注公众号组件的样式固定且不可修改,但产品经理的需求却需要个性化的定制。在这种情况下,我们需要寻找解决方案,以满足这些特殊需求,尽管这可能有点棘手。
26 0
微信小程序:自定义关注公众号组件样式
|
17天前
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
43 1
|
17天前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
98 1
|
23天前
|
小程序 JavaScript
微信小程序之input组件及其获取用户输入信息
微信小程序之input组件及其获取用户输入信息
33 1
|
26天前
|
小程序 Linux Python
查找首字母与Python相关的的英文词汇小程序的续篇---进一步功能完善
查找首字母与Python相关的的英文词汇小程序的续篇---进一步功能完善
17 1
|
2月前
|
小程序 容器
微信小程序常用组件的简单使用 view,scroll-view,swiper,swiper-item,text,rich-text,button,image
本文介绍了微信小程序中常用组件的使用方法,包括view、scroll-view、swiper与swiper-item、text与rich-text、button以及image组件。详细解释了各组件的功能、属性以及如何在小程序页面中进行使用。
微信小程序常用组件的简单使用 view,scroll-view,swiper,swiper-item,text,rich-text,button,image
|
3月前
|
小程序 开发者
Taro@3.x+Vue@3.x+TS开发微信小程序,使用自定义tabBar
本文介绍了如何在Taro项目中实现自定义tabBar。首先,在`app.config.ts`中设置`custom: true`并配置`tabBar`。
100 0
Taro@3.x+Vue@3.x+TS开发微信小程序,使用自定义tabBar