Vue3 生命周期

内容

• 组合 API生命周期写法，其实 选项 API 的写法在 Vue3 中也是支持。
• Vue3（组合 API）常用的生命周期钩子有 7 个，可以多次使用同一个钩子，执行顺序和书写顺序相同。
• setup、onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted。

<template>
  <hello-world v-if="state.bBar" />
  <button @click="state.bBar = !state.bBar">destroy cmp</button>
</template>

<script>
  import HelloWorld from './components/HelloWorld.vue'
  import { reactive } from 'vue'
  export default {
    name: 'App',
    components: {
      HelloWorld
    },
    setup() {
      const state = reactive({
        bBar: true
      })
      return {
        state
      }
    }
  }
</script>

<template>
  <p>{{ state.msg }}</p>
  <button @click="state.msg = 'xxx'">update msg</button>
</template>

<script>
  import {
    onBeforeMount,
    onMounted,
    onBeforeUpdate,
    onUpdated,
    onBeforeUnmount,
    onUnmounted,
    reactive
  } from 'vue'
  export default {
    name: 'HelloWorld',
    setup() {
      const state = reactive({
        msg: 'Hello World'
      })

      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 {
        state
      }
    }
  }
</script>