vue3生命周期函数详解

生命周期函数的定义，我就不过多的讲解了，直接上代码。

<template>
  <div class="lifeCycle">
{{msg}}
<button @click="updateMsg">修改msg</button>
  </div>
</template>
<script>
export default {
  name: "lifeCycle",
  data(){
    return {
      msg:'',
    }
  },
  beforeCreate() {
    console.log("beforeCreate--实例刚刚被创建1");
  },
  created() {
    console.log("created--实例已经创建完毕2");
  },
  beforeMount() {
    console.log("beforeMount--模板编译之前3");
  },
  mounted() {
    // 请求数据，操作dom一般放在这个里面
    console.log("mounted--模板编译完成4");
  },
  beforeUpdate() {
    console.log("beforeUpdate--数据更新之前");
  },
  updated() {
    console.log("updated--数据更新完毕");
  },
  beforeUnmount() { // vue2.x 中beforeDestroy
    // 页面销毁的时候要保存的一些数据，就可以监听这个销毁的生命周期函数
    console.log("beforeUnmount--实例销毁之前");
  },
  unmounted() {  // vue2.x 中destroyed
    console.log("unmounted--实例销毁完成");
  },
  errorCaptured() {
    console.log("errorCaptured--");
  },
  renderTracked() {
    console.log("renderTracked--渲染组件的时候");
  },
  renderTriggered() {
    console.log("renderTriggered--再次渲染组件的时候");
  },
  activated() {
     // 结合keep-alive（可以缓存组件） 使用
    console.log("beforeCreate--缓存组件激活时调用");
  },
  deactivated() {
    console.log("deactivated--缓存组件停用时调用");
  },
  methods: {
    updateMsg(){
      this.msg = '武汉'
    }
  },
};
</script>
<style lang='less' scoped></style>