[uniapp生命周期]详细讲解uniapp中那些属于vue生命周期,那些属于uniapp独有的生命周期,以及这中间的区别相关的内容和api 代码注释-2.Vue生命周期函数代码

在实例初始化之后，数据观测和事件配置之前被调用。

export default {
  beforeCreate() {
    console.log('beforeCreate')
  }
}

实例创建完成后被立即调用。

export default {
  created() {
    console.log('created')
  }
}

在挂载开始之前被调用：相关的 render 函数首次被调用。

export default {
  beforeMount() {
    console.log('beforeMount')
  }
}

实例挂载后调用，此时组件 DOM 已经渲染出来了。

export default {
  mounted() {
    console.log('mounted')
  }
}

数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。

export default {
  beforeUpdate() {
    console.log('beforeUpdate')
  }
}

由于数据更改导致的虚拟 DOM 重新渲染和打补丁完成之后调用。

export default {
  updated() {
    console.log('updated')
  }
}

实例销毁之前调用。

export default {
  beforeDestroy() {
    console.log('beforeDestroy')
  }
}

实例销毁后调用。

export default {
  destroyed() {
    console.log('destroyed')
  }
}

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

this.$nextTick(() => {
  // DOM 更新完成后执行的回调函数
})

迫使 Vue 实例重新渲染。

this.$forceUpdate()

完全销毁一个实例。清理它与其他实例的连接，解绑它的全部指令及事件监听器。

this.$destroy()

[uniapp生命周期]详细讲解uniapp中那些属于vue生命周期,那些属于uniapp独有的生命周期,以及这中间的区别 相关的内容和api 代码注释-2.Vue生命周期函数代码