一、组件的生命周期
1.组件本身的生命周期，写在Component大对象中的lifetimes对象下，如下
lifetimes:{
created(){
console.log("我是create,我里面可以请求数据，但是整个Component对象还没有构建好");
},
attached(){
console.log("我是attached，相当于mounted，此时可以使用this.setData");
},
detached(){
console.log("我是detached，组件离开时触发");
}
},2.和页面相关的生命周期
这个和组件没多大联系，主要是组件所在页面的生命周期，反映到组件上，写在Component字段的pageLifetimes
pageLifetimes:{
hide(){
console.log("我是hide，我会在组件所在页面hide的时候触发");
},
show(){
console.log("我是show，我会在组件所在页面显示的时候触发");
},
resize(){
console.log("我是resize，我会在页面尺寸发生变化时触发");
}
}3.behavior当中的生命周期
我们的behavior当中肯定也会有生命周期，按照设计的逻辑想一想，生命周期肯定是不会同名属性替换的，而是都会执行，现在我们在组件之中添加一个behavior，其中包含这样的一些生命周期函数
lifetimes:{
created(){
console.log("我是behavior当中的created");
},
attached(){
console.log("我是behavior当中的created");
},
detached(){
console.log("我是behavior当中的detached");
}
},看一下测试结果
?成立，而且我们明显的可以看到behavior当中的生命周期是先于组件生命周期执行的
二、数据监听
这个是组件Component当中的observers字段，可以当成vue当中的watch，每当我们使用this.setdata来对data中的数据进行监听的时候，我们就可以进行某些操作
下面是一些关于如何监听的例子，分别是对单个数据的监听、多个数据的监听、对数组对象的监听、使用通配符的监听，此外在methods当中写的则是改变状态的函数
Component({
properties: {
},
data: {
a: 1,
b: 3,
sum: 0,
obj: {
name: "huangfeng",
hobby:{}
},
arr: []
},
observers: {
// 单个数据的监听
'a': function (newa) {
if (newa == 2) {
console.log("搞什么鬼，一定要写个2吗");
}
},
// 多个数据的结合监听
"a,b": function (newa, newb) {
this.setData({
sum: this.data.a + this.data.b
})
},
// 对对象的key或者数组的监听
// 对对象key的监听
"obj.name": function (newname) {
if (newname == "huangfeng") {
console.log("comeon,你根本没有修改名字");
}
},
"arr[0]": function (newval) {
console.log("arr数组终于有值了，这个值是", newval);
},
// 通配符的监听
// 注意通配符不能监听数组
"obj.hobby.**":function(){
console.log("我正在设置hobby值");
}
},
methods: {
changeA() {
this.setData({
a: 2
})
console.log("改变a");
},
changeB() {
this.setData({
b: 10
})
console.log(this.data.sum);
},
changeObj() {
this.setData({
obj: {
name: "huangfeng"
}
})
},
changeArr() {
this.setData({
arr: [0]
})
},
changeObjHobby(){
this.setData({
obj:{
hobby:{first:"study"}
}
})
}
}
})因为我们的组件的props最终是会放到data之中的，所以我们也可以使用这个observer监听传入的数据，我们这边组件中定义了一个name参数
properties: {
name:String
},?并加上对参数的监听
observers:{
"name":function(newname){
console.log("你小子怎么传入新参数了");
}
}在页面上挂载参数
<com-test4 name="{{name}}"></com-test4>
//data中的内容
data: {
name:"huangfeng"
},
//在js部分，我们还定义了一个改变name的函数
changeNameProp(){
this.setData({name:"维达尔"})
},看一下调用改变参数之后的结果
?成了。
三、组件样式
这边我们来看一下，组件的样式部分的问题，这里面有几个注意点需要说一下，因为有一些样式问题，样式能用class写就用class写。
首先，组件中可以在wxss部分，使用：host的写法去规定基本样式
:host {
color: yellow;
}其次，我们可以通过Component对象中的options对象的styleIsolation来控制组件内外的样式交互
一般默认的样式交互是如下的
options:{
styleIsolation:"isolated"
},这种选项下，内外不影响，此外还有以下的选项，这样的话页面能影响组件，组件内部样式不能影响页面，当然相关的样式之类的限制还有很多，可以去官网上看看，我是觉得有点长
options:{
styleIsolation:"apply-shared"
},当然我要提醒一下，这种配置可以在json部分进行定义了
当然我们的组件也可以接受一下特定的外部定义的类，使用externalClasses数组就可以接受特定的外部的类
Component({
externalClasses: ['my-class']
})此外，为了方便书写，即使是在内外样式isolated的情况下，可以使用如下的写法
<view class="~blue-text"> 这段文本是蓝色的 </view>这段代码可以让你使用组件所在page的blue-text样式，要使用父组件的样式，可以采用以下的写法
<view class="^red-text"> 这段文本是红色的 </view>此外关于样式还有一些内容，都在官网上，我实在写不下去了。
另外，组件还有一部分知识没有写出来，下次再更新吧。