生命周期

每个事物从 生成到消亡 的过程 就是这个事物的一个生命周期.

钩子函数

在一个生命周期里的每个阶段,所要经历的事情,我们称它为 生命周期的 钩子函数.

例如:

1. 小孩出生, 需要经历: 建档,上户口,读书,工作等

组件的声明周期

组件的生命周期就是 组件从生成到销毁的过程.在生成到销毁的这个过程中,它在每个阶段都要执行相应的钩子函数

钩子函数如下:

示例

Component({
  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
  attached: function() {
    // 在组件实例进入页面节点树时执行
  },
  detached: function() {
    // 在组件实例被从页面节点树移除时执行
  },
  // ...
})

示例2

1. 子组件wxml

    <view class="wrapper">
        <view>这里是组件的内部节点</view>
    </view>
   

2. 子组件js文件

        // components/mt-component/mt-component.js
    Component({
        lifetimes: {
            created(){
            console.log('组件被创建')
            },
            ready(){
            console.log("组件在视图层上完成布局")
            },
            detached(){
            console.log(" 组件从页面节点树移除时触发 ")
            },
            attached(){
            console.log("组件实例进入页面节点树时执行")
            }
        }
    })
   

3. 父组件wxml文件

        <view>
            <mt-component wx:if="">
                <view>组件内容</view>
            </mt-component>
            <button bindtap="changeShow">关闭组件</button>
        </view>
   

4. 父组件js文件

        Page({
            data: {
                show: true,
            },
            changeShow(){
                let show = this.data.show
                console.log(show)
                this.setData({
                    show: !show
                })
            },
        })
   

效果如下: