杰霸霸博客

主题

Vue3生命周期 ​

1. Vue3的生命周期图 ​

Alt text 可见一共有8个生命周期钩子函数，分别是beforeCreate, created, beforeMount, mounted, beforeUpdate,update,beforeUnmount, unmounted 相比Vue2, 其中逻辑判断el判断直接在第一步就处理了，Vue2需要执行beforeCreate, created 完毕才到el判断, 需要注意的是unmounted 之前也是做了清除组件和自定义事件数据操作，只是文档上没提。另外Vue2中的beforeDestory改名为beforeUnmount, destoryed改名为unmounted

vue
<template>
  <span>{{ count }}</span>
  <br/>
  <button @click="addCount">新增</button>
</template>

<script>
  import { ref, reactive} from 'vue'
  export default {
    name: 'Test',
    setup(){
      console.log('------------setup-----------------')
      let count = ref(0)
      let addCount = ()=>{
        count.value++
      }
      return {
        count,
        addCount
      }
    },
    // 通过配置的形式使用生命周期钩子函数
    beforeCreate(){
      console.log('------------beforeCreate-----------------');
    },
    created(){
      console.log('------------created-----------------');
    },
    beforeMount(){
      console.log('------------beforeMount-----------------');
    },
    mounted(){
      console.log('------------mounted-----------------');
    },
    beforeUpdate(){
      console.log('------------beforeUpdate-----------------');
    },
    updated(){
      console.log('------------updated-----------------');
    },
    beforeUnmount(){
      console.log('------------beforeUnmount-----------------');
    },
    unmounted(){
      console.log('------------unmounted-----------------');
    }
}   
</script>
vue
<template>
  <div>
    <button @click="showComponent">显示/隐藏</button>
    <Test v-if="isShow"></Test>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import Test from './components/Test.vue'
export default {
  name: 'App',
  components: { Test },
  setup(props, context) {
    let isShow = ref(true)
    let showComponent = () => {
      isShow.value = !isShow.value
    }
    return {
      isShow,
      showComponent
    }
  }
}
</script>

Alt text

2. 组合式API和选项式API对应关系 ​

Vue3也提供了组合式(Composition)API形式的生命周期函数, 和Vue2的对应关系如下：

  • beforeCeate ==> setup
  • created ==> setup
  • beforeMount ==> onBeforeMount
  • mounted ==> onMounted
  • beforeUpdate ==> onBeforeUpdate
  • updated ==> onUpdated
  • beforeUnmount ==>onBeforeUnmount
  • unmounted ===> onUnmounted

危险

不建议配置式API和组合式API一起使用,容易导致莫名其妙的问题

vue
<template>
  <span>{{ count }}</span>
  <br />
  <button @click="addCount">新增</button>
</template>

<script>
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'
export default {
  name: 'Test',
  setup() {
    console.log('------------setup-----------------')
    let count = ref(0)
    let addCount = () => {
      count.value++
    }
    // 使用组合式API生命周期钩子函数
    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 {
      count,
      addCount
    }
  }
}   
</script>

Alt text