vue3.x篇二：生命周期

本节是比较vue2.0和vue3.0的生命周期。demo项目链接

<template>
  <div>生命周期</div>
  <button @click="update">版本号{{version}}</button>
</template>

<script>
//按需引入
import {ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onErrorCaptured} from 'vue'

export default {
  setup() {
    
    onBeforeMount(() => {
      console.log('onBeforeMount')
    })
    
    onMounted(() => {
      console.log('onMount')
    })
    
    onBeforeUpdate(() => {
      console.log('onBeforeUpdate')
    })
    
    onUpdated(() => {
      console.log('onUpdated')
    })
    
    onBeforeUnmount(() => {
      console.log('onBeforeUnmount')
    })
    
    onUnmounted(() => {
      console.log('onUnmounted')
    })

    onErrorCaptured(() => {
      console.log('onErrorCaptured')
    })
    
    const version = ref(0)
    
    function update() {
      version.value++
    }
    
    return {
      version,
      update
    }
  }
}
</script>

和vue2.0生命周期对比

2.0	3.0
beforeCreate	use setup()
created	use setup()
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted
errorCaptured	onErrorCaptured