小程序点睛之才不是你想的那种组件

小程序点睛系列写到第三篇，我才在昨夜临睡前想到这个名字。官方文档讲过的东西我不重复，我只在你会写的基础上，帮你画上点睛一笔。这一篇，是我与小程序鏖战半年苦心孤诣的成果，满满干货。

自定义组件

从基础库 1.6.3 开始支持，用来抽象功能组件，以便在多个页面复用。如果你有React或Vue等前端类库的开发经验，对自定义组件一定不会陌生。

小程序吸收了Vue的模板语法，React的状态管理方式，再加上Web Component的Shadow DOM残缺版本，总之就是一边抄一点，形成了独具特色的小程序风格组件。这使得你之前在其它类库上获得的经验不能完全适用。

接下来，我们就一起聊聊小程序组件的奇技淫巧。

JavaScript 部分

小程序将组件数据分为父组件传递来的properties和自身持有的data，这点与主流前端框架类似，我们重点关注properties。

组件的 property 接收type、value、observer三个参数

type: 属性类型，目前支持String,Number,Boolean,Object,Array,null

从.wxml传递过来的值到.js之前会先经过类型转换。如果想传递混合类型值（如既可能是String也可能是Number的值），可以将type设置为null，可以避免默认的类型转换。

value: 默认值

如果不设置value的值，那该property的默认值就是其类型的零值。对应如下：

String => ''
Number => 0
Boolean => false
Object => {}
Array => []
null => null
复制代码

observer: 属性被改变后执行的函数

由于小程序自身不支持watch，故而无法监听data中某一项的改变。但与React不同的是，组件的properties在组件运行时会被整合入data中，通过this.data获取，并且可以调用this.setData改动properties的值。 因此可以将需要监听的data放于properties中，利用observer监听。同时，为表示其为内部状态，建议以下划线（_）开头，且不再外部设置其值。

observer还可以用来减少.wxml模板的重复代码。例如父组件传递了一个 source 对象，要求组件显示其姓名与年龄

// component.js
Component({
    properties: {
        source: Object,
    }
})
复制代码

{{ source.name }}
{{ source.age }}
复制代码

利用 observer 可以写成

// component.js
Component({
    properties: {
        source: {
            type: Object,
            observer(val) {
                this.setData(val)
            }
        }
    }
})
复制代码

{{ name }}
{{ age }}
复制代码

这对体量较大的组件犹为有效。同时，将source 封装为 behavior，可以最大限度的减少冗余代码

// sourceBehavior.js
export default Behavior({
	properties: {
        source: {
            type: Object,
            observer(val) {
                this.setData(val)
            }
    }
  }
})

// component.js
import sourceBehavior from 'path/to/sourceBehavior.js'

Component({
    behaviors: [sourceBehavior]
})
复制代码

WXML 部分

.wxml模块与Vue模板大同小异，唯一值得了解的是由于小程序不完全实现了Shadow DOM，Vue中