# Component(Object object)

创建自定义组件，接受一个 Object 类型的参数。

# 参数

# Object object

生成的组件实例可以在组件的方法、生命周期函数和属性 observer 中通过 this 访问。组件包含一些通用属性和方法。

# applyAnimatedStyle 参数定义

# 配置项定义

selector 语法同 SelectorQuery.select。

默认情况下，updater 函数将被执行一次，其结果作为初值被应用到节点上，设置 immediate: false 则跳过首次执行。

updater 函数返回的 StyleObject 支持的样式集，参考 skyline wxss 样式。StyleObject 的 key 为 css 属性的驼峰写法。

当依赖的 sharedValue 值更新时，updater 函数将被重新执行，并将新的 style 应用到选中节点上。默认情况下，新的样式会在下一个渲染时间片上生效（性能更好），设置 flush: sync 可使得在当前渲染时间片上生效。

callback 回调返回的 styleId，可用于清除样式绑定。

const offset = shared(0)
const styleIds = []
this.applyAnimatedStyle('.box', () => {
  'worklet'
  return {
    transform: `translateX(${offset.value}px) rotate(30deg)`
  }
}, {
  immediate: true,
  flush: 'async'
}, (res) => {
  console.log('animatedStyle 已绑定到节点 ', res.styleId)
  styleIds.push(res.styleId)
})

this.clearAnimatedStyle('.box', styleIds, () => {
  console.log('animatedStyle 已清除绑定')
})

# clearAnimatedStyle 参数定义

styleIds 数组为空，则清除选中节点上所有绑定的 animatedStyle，需要注意的是样式并不会重置，只是解除了依赖关系。styleId 可由 applyAnimatedStyle 回调参数中获取。

节点移除时，相关的 animatedStyle 会自动释放，clearAnimatedStyle 可用于需要提前解绑的情况。

# 示例代码

在开发者工具中预览效果

Component({

  behaviors: [],

  // 属性定义（详情参见下文）
  properties: {
    myProperty: { // 属性名
      type: String,
      value: ''
    },
    myProperty2: String // 简化的定义方式
  },

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

  lifetimes: {
    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    attached: function () { },
    moved: function () { },
    detached: function () { },
  },

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖
  ready: function() { },

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

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

    }
  }

})

注意：在 properties 定义段中，属性名采用驼峰写法（propertyName）；在 wxml 中，指定属性值时则对应使用连字符写法（component-tag-name property-name="attr value"），应用于数据绑定时采用驼峰写法（attr=""）。

# properties 定义

属性值的改变情况可以使用 observer 来监听。目前，在新版本基础库中不推荐使用这个字段，而是使用 Component 构造器的 observers 字段代替，它更加强大且性能更好。

请注意： 定义段中的 type 字段为 必填 项，虽然 2.17.2 及以上的基础库增加了对未填写的兼容（未填写时兼容为填写 null），但更低版本的基础库无法处理未填写的情况，最坏可能会使页面无法正常渲染，请注意兼容。

# 示例代码

Component({
  properties: {
    min: {
      type: Number,
      value: 0
    },
    max: {
      type: Number,
      value: 0,
      observer: function(newVal, oldVal) {
        // 属性值变化时执行
      }
    },
    lastLeaf: {
      // 这个属性可以是 Number 、 String 、 Boolean 三种类型中的一种
      type: Number,
      optionalTypes: [String, Object],
      value: 0
    }
  }
})

属性的类型可以为 String Number Boolean Object Array 其一，也可以为 null 表示不限制类型。

多数情况下，属性最好指定一个确切的类型。这样，在 WXML 中以字面量指定属性值时，值可以获得一个确切的类型，如：

<custom-comp min="1" max="5" />

此时，由于自定义组件的对应属性被规定为 Number 类型， min 和 max 会被赋值为 1 和 5 ，而非 "1" 和 "5" ，即：

this.data.min === 1 // true
this.data.max === 5 // true

# Bug & Tip

• 使用 this.data 可以获取内部数据和属性值；但直接修改它不会将变更应用到界面上，应使用 setData 修改。
• 生命周期函数无法在组件方法中通过 this 访问到。
• 属性名应避免以 data 开头，即不要命名成 dataXyz 这样的形式，因为在 WXML 中， data-xyz="" 会被作为节点 dataset 来处理，而不是组件属性。
• 在一个组件的定义和使用时，组件的属性名和 data 字段相互间都不能冲突（尽管它们位于不同的定义段中）。
• 从基础库 2.0.9 开始，对象类型的属性和 data 字段中可以包含函数类型的子字段，即可以通过对象类型的属性字段来传递函数。低于这一版本的基础库不支持这一特性。
• bug : 位于 slot 中的自定义组件没有触发 pageLifetimes 中声明的页面生命周期，此问题在 2.5.2 中修复。
• bug : 对于 type 为 Object 或 Array 的属性，如果通过该组件自身的 this.setData 来改变属性值的一个子字段，则依旧会触发属性 observer ，且 observer 接收到的 newVal 是变化的那个子字段的值， oldVal 为空， changedPath 包含子字段的字段名相关信息；目前推荐使用 observers 定义段代替。