开发
API

组件行为 behaviors

定义和使用 behaviors

behaviors 是用于组件间代码共享的特性,类似于一些编程语言中的 mixins

每个 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 数组靠后的,再触发前面的。
点击纠错
该文档是否对你的开发有所帮助?
有帮助
没帮助
该文档是否对你的开发有所帮助?
有帮助
没帮助