组件行为 behaviors
收藏
我的收藏

定义和使用 behaviors​

behaviors 是用于组件间代码共享的特性,类似于一些编程语言中的 mixinstraits
    每个 behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用它时,它的属性、数据和方法会被合并到组件中,生命周期函数也会在对应时机被调用。​
    每个组件可以引用多个 behaviorbehavior 也可以引用其他 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
    生命周期函数:attachedcreatedready
这将使 my-component 最终结构为:​
    属性:myBehaviorPropertymyProperty
    数据字段:myBehaviorDatamyData
    方法:myBehaviorMethodmyMethod
    生命周期函数:attachedcreatedready
当组件触发生命周期时,上例生命周期函数执行顺序为:​
    [behavior] created
    [component] created
    [behavior] attached
    [component] attached
    [behavior] ready
    [component] ready

同名字段的覆盖和组合规则​

组件和它引用的 behavior 中可以包含同名的字段,对这些字段的处理方法如下:​
    如果有同名的属性或方法,组件本身的属性或方法会覆盖 behavior 中的属性或方法,如果引用了多个 behavior ,在定义段中靠后 behavior 中的属性或方法会覆盖靠前的属性或方法;​
    如果有同名的数据字段,如果数据是对象类型,会进行对象合并,如果是非对象类型则会按照前述规则进行覆盖;​
    生命周期函数不会相互覆盖,而是在对应触发时机被逐个调用。如果同一个 behavior 被一个组件多次引用,它定义的生命周期函数只会被执行一次;​
    如果组件和它引用的 behavior 都定义了 observersbehaviorobservers 会进行合并到组件的 observers。相同字段的监听回调需要被触发时,先触发 behavior 的监听回调,再触发组件的监听回调。如果引用多个 behavior,对于同名的 observers 字段,当触发监听回调时,先触发在 behaviors 数组靠后的,再触发前面的。​