【微信小程序】自定义组件（二）
🎁写在前面：
观众老爷们好呀，这里是前端小刘不怕牛牛频道，小程序系列文章又更新了呀。
上文我们讲解了微信小程序自定义组件的入门知识，那么今天牛牛就来讲讲自定义组件的进阶知识吧，赶紧拿起小本本做笔记呀！
文章目录
- 一，组件的数据和方法
- 1.1 data数据
- 1.2 methods方法
- 1.3 properties属性
- 二，数据监听器
- 三，纯数据字段
- 四，组件的生命周期
- 4.1 生命周期阐述
- 4.2 定义生命周期
- 4.2 监听组件所在页面的生命周期
一，组件的数据和方法
自定义组件的数据和方法在使用上，和Vue的组件十分相似，不过也有一点区别，首先我们来了解一下组件私有数据的定义。
1.1 data数据
data中的数据就作为组件的私有数据使用，定义在对应自定义组件js文件下的component构造器中，语法如下：
Component({
data : {
a : 10,
b : 20
}
})
这样我们就给组件定义了两个数据，在模板在我们可以直接{{a}}调用，而在component构造器中，我们也只需this.a便可获取到该数据。
1.2 methods方法
methods中方法的定义也是与Vue十分相似，位置与上述的data同级，语法如下：
Component({
methods : {
// 定义一个isShow函数
isShow(){
// do something
}
}
})
不过，在开发中会将methods方法分为事件处理函数和自定义方法，事件处理函数是监听事件，当事件触发再调用。而自定义方法则是由我们自己调用。
在命名上，建议methods中的自定义方法以_开头，以便区分。
1.3 properties属性
properties可以称之为对外属性，用来接收外界传递给组件的数据。而这个外界就是父组件，也就是说在页面引用自定义组件的时候，可以同时传递数据进去，组件就会通过properties属性接收传进来的数据。
<son-view username='niuniu'></son-view>
学过Vue的小伙伴可能就说了，这不就是Vue的props属性吗。
对，但不完全对。在微信小程序中，properties属性里的数据也是可以修改的，这是需要注意的地方。
回归正题，如何在组件中接收这个数据呢？
-
如果你想给
properties中 的数据定义默认值，若没有传值，则用默认值赋值，那么你需要用完整格式properties : { username : { type: String, value : xiaoliu } } -
如果不需要赋默认值，就可以使用简化格式
properties : { username : String }
如何修改：
我们还是可以直接调用this.setData方法进行修改。
this.setData({username : this.username.slice(0, -1)})
二，数据监听器
数据监听器其实类似于Vue的watch监听属性
我们可以选择对某个数据进行监听， 当发生变化时，调用对应的回调函数
Component({
observers : {
'username' : function(username){}
}
})
一个回调函数可以对应监听多个，只需要添加对应参数即可。
监听对象属性字段：
当我们想要监听对象里面的数据，只需要用obj.username代替上面的username即可。
需要注意的是，监听对象属性的触发情况，不仅有this.setData方法改变对象属性值触发，直接给对象赋值也会触发。
三，纯数据字段
简而言之，在data的数据，不用于界面的渲染，也不传递给其他组件，仅在组件内部使用，我们便可把他定义为纯数据字段，这样做的作用就是提升页面更新的性能
使用方法：
在 Component 构造器的 options 定义段中指定 pureDataPattern 为一个正则表达式，字段名符合这个正则表达式的字段将成为纯数据字段
比如我想要让开头是_的字段名作为纯数据字段，我可以这样做。
Component({
options : {
pureDataPattern : /^_/
}
})
四，组件的生命周期
前面我们提过小程序的生命周期、页面的生命周期，组件的生命周期的作用与前两者一样，帮助程序员在特定的时间点处理一些事情。
4.1 生命周期阐述
组件的生命周期按时间顺序有：
| 钩子 | 说明 |
|---|---|
created | Component实例创建时调用 |
attached | 实例进入页面节点树 |
ready | 在组件在视图层布局完成后执行 |
moved | 在组件实例被移动到节点树另一个位置时执行 |
detached | 在组件实例被从页面节点树移除时执行 |
error | 组件方法抛出错误时 |
对于组件来说，最重要的生命周期是 created 、attached、 detached
created调用时，组件实例刚创建，不能用setData，通常只是给this添加一些自定义的属性字段- 当
attached调用时，this.data初始化完毕，这时候我们可以做一些初始化工作，比如发送请求获取初始数据 - 而当
detached调用时，退出页面，此时可以做一些清理性质的工作
4.2 定义生命周期
定义生命周期的方法有新旧两种，旧的方法和Vue一样，直接在Component里面定义（第二级）。
而新的方法则是需要在Component中的lifetimes中定义，建议使用新的方法定义生命周期。
4.2 监听组件所在页面的生命周期
有时，组件的一些行为需要依赖所在页面生命周期调用的时机，如触发页面的show时，组件想要显示出欢迎回来的字样
这时候，我们可以在组件中监听页面的生命周期，只需要在Component的pageLifetimes中定义即可。
pageLifetimes : {
show : function(){
//触发时调用
}
}
注意：
组件只可访问show、hide、resize三个页面生命周期
今天的小程序文章到这里就结束啦，如果觉得对您有帮助的话，可以关注牛牛接下来的文章
感谢您的支持，您的支持是我们创作的最大动力！！！
债见~~
