开发者社区
社区提问意见反馈
开发者钉组织
扫描二维码
加入支付宝开发者钉组织
开发 > 框架 > 自定义组件 > 数据变化观测器
贡献者
收藏
订阅更新
我的文档
设置
用于观测和响应任何属性和数据字段的变化,适用于 自定义组件小程序页面小程序基础库版本 2.8.1 开始支持。
开启数据变化观测器
开发者在开发跨平台小程序时,会基于支付宝自定义组件系统封装出数据变化观测器。为了避免可能存在的基础库数据变化观测器与开发者对 observers 参数的封装产生冲突,需要由开发者显式开启数据变化观测器。
component 构造器的 options 配置项设置 observers: true
typescript
复制代码
component({
options: {
// 使用基础库内置的数据变化观测器
observers: true,
},
});
page 构造器的 options 配置项设置 observers: true
typescript
复制代码
page({
options: {
// 使用基础库内置的数据变化观测器
observers: true,
},
});
兼容示例
typescript
复制代码
function wrapcomponentoptions (options) {
// 运行时检测当前基础库版本是否已支持observers
if (my.caniuse('component.observers')) {
options.options = options.options || {};
options.options = {
observers: true,
};
} else {
// 开发者统一封装的observers功能
}
return options;
}

component(wrapcomponentoptions(
// 数据变化观测器
observers: {
"**": function(val) {
console.log(val);
}
}
));
使用数据变化观测器
有时,在一些数据字段被 setdata 设置时,需要执行一些操作。 例如, this.data.sum 永远是 this.data.numbera 与 this.data.numberb 的和。此时,可以使用数据变化观测器进行如下实现。
观测字段语法
数据变化观测器支持观测属性或内部数据的变化,可以同时观测多个。但一次 setdata 每个观测器最多触发一次。 同时,观测器可以观测子数据字段。
示例代码
如果需要观测所有子数据字段的变化,可以使用通配符 **
特别地,仅使用通配符 ** 可以观测全部 setdata 以及所有属性的变化。
注意事项
数据变化观测器观测的是 setdata 涉及到的数据字段,即使这些数据字段的值没有发生变化,数据变化观测器依然会被触发。
如果在数据变化观测器函数中使用 setdata 设置本身观测的数据字段,可能会导致死循环,需要特别留意。
特别地,当观测的字段为**时,观测器对应入参的值将是 {...this.props, ...this.data}。应尽量避免观测 **,会导致性能受影响。
正常情况下,属性或内部数据的变化都会触发对应字段的观测器函数。但同名字段(字段在属性内与内部数据同时存在),则此时只有 setdata 会触发对应字段的观测器。因此,应尽量避免属性和内部数据拥有同名字段。
对于同名字段,可使用生命周期函数 derivedatafromprops 判断属性是否发生变化。
是否 开启component2 的差异:
当开启 component2 后,数据变化观测器会在相当于 derivedatafromprops 生命周期方法执行后、更新子组件(更新组件树)之前的时刻执行符合条件的 callback。如果数据变化观测器对应的 callback 又执行了setdata,会继续检测并执行符合条件的 callback。
未开启 component2 时,数据变化观测器会在相当于 didmount/didupdate 生命周期方法执行后即子组件已经更新(更新组件树)的时刻执行符合条件的 callback。如果数据变化观测器对应的 callback 又执行了setdata,并不会触发数据变化观测器对应的 callback(与 didupdate 内执行 setdata 不会继续触发 didupdate 的行为保持一致)。
当使用数据变化观测器时,建议开启 component2,可减少不必要的组件树刷新。
内容没有解决您的问题?您还可以前往 或 寻求帮助
凯发k8官方网娱乐官方 copyright © 2022 支付宝(杭州)信息技术有限公司  | icp证浙b2-20160559
该文档对你是否有帮助?
当前页面目录
网站地图