组件行为 behaviors收藏我的收藏
收藏
我的收藏定义和使用 behaviors
behaviors
是用于组件间代码共享的特性,类似于一些编程语言中的 mixins
或 traits
- •每个
behavior
可以包含一组属性、数据、生命周期函数和方法。组件引用它时,它的属性、数据和方法会被合并到组件中,生命周期函数也会在对应时机被调用。- •每个组件可以引用多个
behavior
,behavior
也可以引用其他 behavior
。- •
behavior
需要使用 Behavior()
构造器定义。代码示例
module.exports = Behavior({ behaviors: [], properties: { myBehaviorProperty: { type: String, }, }, data: { myBehaviorData: {}, }, created() { console.log("[behavior] created"); }, attached() { console.log("[behavior] attached"); }, ready() { console.log("[behavior] ready"); }, methods: { myBehaviorMethod() {}, }, });
组件引用时,在
behaviors
定义段中将它们逐个列出即可。代码示例
const myBehavior = require("my-behavior"); Component({ behaviors: [myBehavior], properties: { myProperty: { type: String, }, }, data: { myData: {}, }, created() { console.log("[component] created"); }, attached() { console.log("[component] attached"); }, ready() { console.log("[component] ready"); }, methods: { myMethod() {}, }, });
在上例中,
my-component
组件定义中加入了 my-behavior
,而 my-behavior
结构为:- •属性:
myBehaviorProperty
- •数据字段:
myBehaviorData
- •方法:
myBehaviorMethod
- •生命周期函数:
attached
、created
、ready
这将使
my-component
最终结构为:- •属性:
myBehaviorProperty
、myProperty
- •数据字段:
myBehaviorData
、myData
- •方法:
myBehaviorMethod
、myMethod
- •生命周期函数:
attached
、created
、ready
当组件触发生命周期时,上例生命周期函数执行顺序为:
- •
[behavior] created
- •
[component] created
- •
[behavior] attached
- •
[component] attached
- •
[behavior] ready
- •
[component] ready
同名字段的覆盖和组合规则
组件和它引用的
behavior
中可以包含同名的字段,对这些字段的处理方法如下:- •如果有同名的属性或方法,组件本身的属性或方法会覆盖
behavior
中的属性或方法,如果引用了多个 behavior
,在定义段中靠后 behavior
中的属性或方法会覆盖靠前的属性或方法;- •如果有同名的数据字段,如果数据是对象类型,会进行对象合并,如果是非对象类型则会按照前述规则进行覆盖;
- •生命周期函数不会相互覆盖,而是在对应触发时机被逐个调用。如果同一个
behavior
被一个组件多次引用,它定义的生命周期函数只会被执行一次;- •如果组件和它引用的
behavior
都定义了 observers
, behavior
的 observers
会进行合并到组件的 observers
。相同字段的监听回调需要被触发时,先触发 behavior
的监听回调,再触发组件的监听回调。如果引用多个 behavior
,对于同名的 observers
字段,当触发监听回调时,先触发在 behaviors
数组靠后的,再触发前面的。