微信小程序-自定义组件生命周期

井眼2024-07-24 12:37

一.created

组件实例创建完毕调用。定义在lifetimes对象里。

不能在方法里面更改data对象里面的值，但是可以定义属性值。

复制代码

  lifetimes:{
    //不能给data设置值
    created(){
      this.test='aa'
      console.log("created")   
    }
    }

二. attached

模板解析完成挂载到页面。

可以更改data对象的值，而且可以使用created的属性值。

复制代码

  lifetimes:{
    attached(){
      console.log('attached')
      console.log(this.test)
    }
    }

三. detached

组件销毁时调用。

复制代码

  lifetimes:{
    detached(){
      console.log('detached')
    }
    }

四.执行顺序

五.组件所在页面的生命周期

show：组件所在页面被展示时候，后台切前台,tabbar等

hide：组件所在页面被隐藏，前台切后台

用在 pageLifetimes对象里面

复制代码

  pageLifetimes:{
    //组件所在页面被展示时候，后台切前台,tabbar等
    show(){
      console.log('show')
    },
     //组件所在页面被隐藏，前台切后台
    hide(){
      console.log('hide')
    }

  }