组件生命周期

对生命周期的理解

参考地址：https://cn.vuejs.org/guide/essentials/lifecycle.html

注意：以下只说明的常用的几个组件生命周期，并不是所有。

​ 为了测试生命周期，下载了对应vue2所需要的 vue.js devtools 6.6.4 来源于谷歌商城，这里有时不显示注意清理缓存，或者刷新，已经卸载换了最新版本

​

​ 概念：Vue组件实例在创建时要经历一系列的初始化步骤，在此过程中Vue会在合适的时机，调用特定的函数，从而让开发者有机会在特定阶段运行自己的代码，这些特定的函数统称为：生命周期钩子

​ 规律：生命周期整体分为四个阶段，分别是：创建、挂载、更新、销毁，每个阶段都有两个钩子，一前一后。

Vue2的生命周期

​ 创建阶段：beforeCreate、created

​ 挂载阶段：beforeMount、mounted

​ 更新阶段：beforeUpdate、updated

​ 销毁阶段：beforeDestroy、destroyed

参考代码（ /* eslint-disable */ //取消一下的代码检查）：

<!-- 组件App -->
<template>
  <div id="app">
    <PersonComponents v-if="isShow"/>
  </div>
</template>
 
<script>
import PersonComponents from './components/PersonComponents.vue'
 
export default {
  name: 'App',
  components: {
    PersonComponents
  },
  data() {
    return {
      isShow:true
    }
  }
}
</script>
 
 
<!-- 组件PersonComponents -->
<template>
  <div class="person">
    <h2>当前求和为: {{ sum }}</h2>
    <button @click="add">点我sum+1</button>
  </div>
</template>
 
<script>
export default {
  /* eslint-disable */    //取消代码检查
  name: 'PersonComponents',
  //数据
  data() {
    return {
      sum: 0
    }
  },
  //方法
  methods:{
    add() {
      this.sum += 1;
    }
  },
  //创建前
  beforeCreate() {
    console.log('beforeCreate: 创建前');
  },
  //创建后
  created () {
    console.log('created: 创建完毕');
  },
  //挂载（把组件塞进浏览器）前
  beforeMount() {
    console.log('beforeMount: 挂载前');
  },
  //挂载后
  mounted() {
    console.log('mounted: 挂载后');
  },
  //更新前
  beforeUpdate() {
    console.log('beforeUpdate: 更新前');
  },
  //更新后
  updated() {
    console.log('updated: 更新后');
  },
  //销毁前
  beforeDestroy() {
    console.log('beforeDestroy: 销毁前');
  },
  //销毁后
  destroyed() {
    console.log('destroy: 销毁后');
  }
}
</script>
 
<style>
  .person {
    background-color: skyblue;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px;
  }
</style>

Vue3的生命周期

注意：先子后父

​ 创建阶段：setup

​ 挂载阶段：onBeforeMount、onMounted

​ 更新阶段：onBeforeUpdate、onUpdated

​ 卸载阶段：onBeforeUnmount、onUnmounted

​ 常用的钩子：onMounted(挂载完毕)、onUpdated(更新完毕)、onBeforeUnmount(卸载之前)

参考代码：

<!-- App父组件 -->
<template>
  <div class="app">
    <Person v-if="show"/>
  </div>
</template>
 
<script lang="ts" setup name="App">
  import Person from './components/Person.vue';
  import { ref, onMounted } from 'vue';
 
  //数据
  let show = ref(true);
 
  //挂载完毕
  onMounted(() => {
    console.log('父-挂载完毕');
  })
</script>
 
 
<!-- Person子组件 -->
<template>
  <div class="person">
    <h2>当前求和为：{{ sum }}</h2>
    <button @click="add">点我sum+1</button>
  </div>
</template>
 
<script setup lang="ts" name="Person">
  import { 
    ref, 
    onBeforeMount, 
    onMounted, 
    onBeforeUpdate, 
    onUpdated, 
    onBeforeUnmount, 
    onUnmounted 
  } from 'vue'
 
  //数据
  let sum = ref(0);
 
  //方法
  function add() {
    sum.value += 1;
  }
 
  //创建  setup 就是创建
  console.log('创建');
 
  //挂载
  onBeforeMount(() => {
    console.log('挂载前');
  })
 
  //挂载完毕
  onMounted(() => {
    console.log('子-挂载完毕');
  })
 
  //更新之前
  onBeforeUpdate(()=>{
    console.log('更新之前');
  })
 
  //更新完毕
  onUpdated(()=>{
    console.log('更新完毕');
  })
 
  //卸载之前
  onBeforeUnmount(()=>{
    console.log('卸载之前');
  })
 
  //卸载完毕
  onUnmounted(()=>{
    console.log('卸载完毕');
  })
</script>
 
<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px; /* 盒子阴影 */
  border-radius: 10px;
  padding: 20px;
}
 
button {
  margin: 0 5px;
}
</style>

常用钩子

​ 常用的钩子：onMounted(挂载完毕)、onUpdated(更新完毕)、onBeforeUnmount(卸载之前)