[小程序开发] 组件生命周期

一、组件生命周期

        组件自身的一些钩子函数，这些函数在特定的时间节点时被自动触发。

二、组件生命周期函数

        组件的生命周期函数需要在lifetimes字段内进行声明。

        组件的生命周期函数有5个：created、attached、ready、moved、detached。

• 在created钩子函数中，不能调用setData，可以给组件添加一些自定义的属性。
• 页面中的交互会在attached钩子函数中进行执行

 lifetimes:{
       // 在created钩子函数中，可以给组件添加一些自定义的属性，通过this的方式进行添加
        created(){
            console.log('组件 created')
            // 给组件添加一些自定义的属性
            this.test='测试'
        },
        attached(){           
            console.log(this.test)            
        }
    }

 lifetimes:{
        
        attached(){
            console.log('组件 attached')
            // 页面中的交互会在attached钩子函数中进行执行
            this.setData({
                name:'jerry'
            })
        }
        
    }

三、组件生命周期执行顺序

        小程序页面 --- created（组件实例创建完毕）--- attached（模板解析完成挂载到页面）--- detached（组件被销毁）

• created：组件实例被创建好以后执行
• attached：组件被初始化完毕，模板解析完成，已经将组件挂载到页面上时执行 
• detached：组件被销毁时执行 

 lifetimes:{
        //created：组件实例被创建好以后执行
        created(){
            console.log('组件 created')
        },
        // attached：组件被初始化完毕，模板解析完成，已经将组件挂载到页面上时执行
        attached(){
            console.log('组件 attached')
        },
        // detached：组件被销毁时执行
        detached(){
            console.log('组件 detached')
        }
    }

 四、组件所在页面的生命周期

        主要用于组件内部监听父组件的展示、隐藏状态，从而方便组件内部执行一些业务逻辑的处理。

五、组件所在页面的生命周期函数

        组件所在页面的生命周期函数需要在pageLifetimes字段内进行声明。

        组件所在页面的生命周期函数有4个：show、hide、resize、routeDone。

 六、组件所在页面的生命周期函数执行顺序

        小程序页面展示 --- show（组件所在的页面被展示时执行）

        小程序页面隐藏 --- hide（组件所在页面被隐藏时执行）

 pageLifetimes:{
        // 监听组件所在的页面展示(后台切前台)状态
        show(){
            console.log('组件所在页面被展示')
        },
        // 监听组件所在的页面隐藏(前台切后台 、点击tabBar)状态
        hide(){
            console.log('组件所在页面被隐藏')
        }
    }

七、小程序生命周期

        一个小程序完整的生命周期由应用生命周期、页面生命周期和组件生命周期三部分组成。