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


目录
相关文章
|
16天前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十三、自定义一个运动分析器,实现计时计数02
本文介绍如何利用“云智AI运动识别小程序插件”开发AI运动小程序,详细解析了俯卧撑动作的检测规则构建与执行流程,涵盖卧撑和撑卧两个姿态的识别规则,以及如何通过继承`sports.SportBase`类实现运动分析器,适用于小程序开发者。
|
16天前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十二、自定义一个运动分析器,实现计时计数01
随着AI技术的发展,AI运动APP如雨后春笋般涌现,如“乐动力”、“天天跳绳”等,推动了云上运动会、线上健身等热潮。本文将指导你从零开始开发一个AI运动小程序,利用“云智AI运动识别小程序插件”,介绍运动识别原理、计量方式及运动分析器基类的使用,帮助你在小程序中实现运动计时和计数功能。下篇将继续探讨运动姿态检测规则的编写。
|
2天前
|
小程序 安全 搜索推荐
陪玩小程序的搭建解析与功能需求
陪玩小程序是为玩家提供专业陪玩服务的应用,嵌入社交或游戏平台,具备智能匹配、实时聊天、预约服务等功能,支持便捷高效的游戏体验。源码交付时需提供详细文档、技术支持及定制开发服务,确保客户能顺利维护和升级。选择陪玩小程序时应关注功能需求、用户体验、安全性和成本效益,以确保最佳使用效果。
19 0
|
1月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
34 0
在线课堂+工具组件小程序uniapp移动端源码
|
2月前
|
小程序 数据可视化 JavaScript
微信小程序:轻松实现时间轴组件
本文介绍了如何在微信小程序中实现一个可视化时间轴组件。该组件适用于展示用户资金流动、投资结算等时间节点,帮助用户直观了解资金去向。时间轴支持自定义节点形状、显示序号、倒序排列等功能,并通过插槽灵活定义动态内容。文中详细介绍了组件的设计与使用方法,以及如何结合动态 slot 实现自定义操作。该组件为展示用户资金信息提供了美观、易用的解决方案。
70 1
微信小程序:轻松实现时间轴组件
|
1月前
|
小程序 数据挖掘 UED
开发1个上门家政小程序APP系统,都有哪些功能?
在快节奏的现代生活中,家政服务已成为许多家庭的必需品。针对传统家政服务存在的问题,如服务质量不稳定、价格不透明等,我们历时两年开发了一套全新的上门家政系统。该系统通过完善信用体系、提供奖励机制、优化复购体验、多渠道推广和多样化盈利模式,解决了私单、复购、推广和盈利四大痛点,全面提升了服务质量和用户体验,旨在成为家政行业的领导者。
|
2月前
|
小程序
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
635 1
|
2月前
|
存储 自然语言处理 小程序
微信小程序多语言切换神器:简繁体切换功能完全指南
随着全球化的发展,支持多种语言的应用程序愈发重要。本文介绍了如何在微信小程序中实现简体与繁体字体之间的切换功能,以满足不同地区用户的需求。通过创建utils文件夹并编写相应的转换函数,开发者可以方便地实现语言切换,从而提升用户体验。文章中还附带了示例代码和效果图,帮助读者更好地理解和应用这一功能。
112 0
微信小程序多语言切换神器:简繁体切换功能完全指南
|
2月前
|
小程序 搜索推荐 API
微信小程序:自定义关注公众号组件样式
尽管关注公众号组件的样式固定且不可修改,但产品经理的需求却需要个性化的定制。在这种情况下,我们需要寻找解决方案,以满足这些特殊需求,尽管这可能有点棘手。
79 0
微信小程序:自定义关注公众号组件样式
|
2月前
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
76 1
下一篇
DataWorks