Vue3：组合API-生命周期

写在前面

        朋友们好呀，又见面啦。今天讲一下Vue3的生命周期，看看跟Vue2相比做了哪些改动吧。

回顾Vue2.0生命周期钩子函数

        在讲Vue3的生命周期之前我们先来回顾下Vue2.0的生命周期钩子函数：

• beforeCreate

• created

• beforeMount

• mounted

• beforeUpdate

• updated

• beforeDestroy

• destroyed

认识Vue3.0生命周期钩子函数

• setup 创建实例前

• onBeforeMount 挂载DOM前

• onMounted 挂载DOM后

• onBeforeUpdate 更新组件前

• onUpdated 更新组件后

• onBeforeUnmount 卸载销毁前

• onUnmounted 卸载销毁后

示例代码：

<template>
  <div class="container">
    container
  </div>
</template>
<script>
import { onBeforeMount, onMounted } from 'vue'
export default {
  setup () {
    onBeforeMount(()=>{
      console.log('DOM渲染前',document.querySelector('.container'))
    })
    onMounted(()=>{
      console.log('DOM渲染后1',document.querySelector('.container'))
    })
    onMounted(()=>{
      console.log('DOM渲染后2',document.querySelector('.container'))
    })
  },
}
</script>

战术总结：

1. Vue3生命周期的函数发生了变化

2. 去掉两个：beforeCreate和created，添加了setup

3. 方法名称发生变化：方法名称前面多了个on，中间是驼峰式的

4. 卸载组件的生命周期变化：onBeforeUnmount 、onUnmounted

5. 同一个生命周期可以触发多次

写在最后

        有没有好好学习呀？要好好学习，好好生活，挣多多的钱钱！下期见呀读者朋友！