vue2的生命周期图

 

vue3的生命周期图

vue3中可以继续使用vue2.x中的生命周期钩子，但是有两个被改名：

beforeDestroy改名为beforeUnmount

destroyed改名为unmounted

vue3也提供了Composition API形式的生命周期钩子，与vue2.x中钩子对应关系如下

beforeCreate =====setup（）

created =========setup（）

beforeMount=====onBeforeMount

mounted========onMounted

beforeUpdate====onBeforeUpdate

updated========onUpdated

beforeUnmount==onBeforeUnmount

unmounted=====onUnmounted

<script>
import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'
export default {
  name: 'Demo',
  setup() {
    //数据
    let sum = ref(0)
    //通过配置项的形式使用生命周期钩子
    onBeforeMount(()=>{
      console.log('----onBeforeMount----')
    })
    
    onMounted(()=>{
      console.log('----onMounted----')
    })
    onBeforeUpdate(()=>{
      console.log('----onBeforeUpdate----')
    })
    onUpdated(()=>{
      console.log('----onUpdated----')
    })
    onBeforeUnmount(()=>{
      console.log('----onBeforeUnmount----')
    })
    onUnmounted(()=>{
      console.log('----onUnmounted----')
    })
    //返回一个对象
    return{
      sum,
    }
  }
}
</script>