Vue－Composition API（Life Cycle Hooks）

又見面了。

簡述

在 setup 中也可以使用 Lifecycle hooks，唯一的差別就是多了 on- 這個前綴，例如 mounted -> onMounted 。

這邊附贈一個簡單的範例。

Home.vue：

<template>
  <div class="home">
    <!-- 觸發 onUnmounted -->
    <router-link :to="{ name: 'About' }">About</router-link>
    <!-- 輸入時觸發 onUpdated -->
    <input type="text" v-model="input" />
  </div>
</template>

<script>
  import { ref } from '@vue/reactivity'
  import { onMounted, onUnmounted, onUpdated } from '@vue/runtime-core'

  export default {
    setup() {
      onMounted(() => console.log('mounted'))
      onUpdated(() => console.log('updated'))
      onUnmounted(() => console.log('unmounted'))

      const input = ref('')

      return { input }
    }
  }
</script>

應該不難理解，真的有疑問的話到 這邊 玩玩看吧。