---
title: Component 构造器
summary: "介绍 Component 构造器的使用方法，包括属性定义、内部数据、生命周期函数和自定义方法的配置。"
questions:
  - Component 构造器的作用是什么？
  - 组件属性有哪两种定义方式？
  - Component 构造器中 data 字段的作用是什么？
  - lifetimes 中可以定义哪些生命周期函数？
  - pageLifetimes 支持哪些页面生命周期函数？
  - 如何在组件方法中更新数据？
  - 组件内部方法的命名建议是什么？
---

Component 构造器可用于定义组件，调用 Component 构造器时可以指定组件的属性、数据、方法等。

详细的参数含义和使用，请参考 [Component 参考文档](/cn/miniapp/develop/miniapp/framework/api/component)。

```js
Component({
  behaviors: [],

  properties: {
    myProperty: {
      // 属性名
      type: String,
      value: '',
    },
    myProperty2: String, // 简化的定义方式
  },

  data: {}, // 私有数据，可用于模板渲染

  lifetimes: {
    created: function () {},
    attached: function () {},
    detached: function () {},
  },

  pageLifetimes: {
    // 组件所在页面的生命周期函数
    show: function () {},
    hide: function () {},
  },

  methods: {
    onMyButtonTap: function () {
      this.setData({
        // 更新属性和数据的方法与更新页面数据的方法类似
      });
    },
    // 内部方法建议以下划线开头
    _myPrivateMethod: function () {
      // 这里将 data.A[0].B 设为 'myPrivateData'
      this.setData({
        'A[0].B': 'myPrivateData',
      });
    },
    _propertyChange: function (newVal, oldVal) {},
  },
});
```

<!-- 使用 `Component` 构造器来构造页面的一个好处是可以使用 `behaviors` 来提取所有页面中公用的代码段。

例如，在所有页面被创建和销毁时都要执行同一段代码，就可以把这段代码提取到 behaviors 中。

```js
// page-common-behavior.js
module.exports = Behavior({
  attached: function() {
    // 页面创建时执行
    console.info('Page loaded!');
  },
  detached: function() {
    // 页面销毁时执行
    console.info('Page unloaded!');
  },
});
``` -->