<template>
? <div>
? ? <h1>Vue3生命周期鉤子函數</h1>
? ? <h2>響應式攔截數據data的值是：{{msg}}</h2>
? ? <p><button @click="changeMsg">點擊改變msg</button></p>
? </div>
</template>

<script>
import { reactive, onUnmounted, onUpdated, onMounted, toRefs } from 'vue'; // 引入需要的
export default {
? setup () {
? ? // 初始化項目工作都放在setup中
? ? console.log("當前應用程序被安裝了");
? ? const state = reactive({ // 定義狀態
? ? ? msg: '學而時習之', // 定義變量
? ? ? changeMsg: () => { // 定義方法
? ? ? ? state.msg = '不亦說乎'
? ? ? }
? ? })
? ? let timer = 0;
? ? let count = 0;
? ? onMounted(() => {
? ? ? console.log('頁面掛載完成，觸發了onMounted鉤子函數');
? ? ? timer = setInterval(() => {
? ? ? ? console.log('定時器正在運行中', count++)
? ? ? }, 1000)
? ? })
? ? onUpdated(() => {
? ? ? console.log('數據發生了更新，觸發了onUpdated鉤子函數')
? ? })
? ? onUnmounted(() => {
? ? ? console.log('頁面/組件退出，觸發了onUnmounted鉤子函數')
? ? ? // 如果不清楚，這些異步的行為就會常駐在內存中，一定程度上會造成常駐內存的不必要消耗，造成內存泄露
? ? ? clearInterval(timer);
? ? })
? ? return {
? ? ? ...toRefs(state)
? ? }
? }
}
</script>