抖音开放平台Logo
开发者文档
“/”唤起搜索
控制台

组件行为 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 数组靠后的,再触发前面的。
​