Vue2、Vue3、小程序頁面生命周期詳解

本篇將對比 Vue2、Vue3 以及小程序頁面/組件的生命周期，簡單梳理各自特點、差異、新增優化點。

?? Vue2 生命周期

beforeCreate → created → beforeMount → mounted → beforeUpdate → updated → beforeDestroy → destroyed

說明：

示例：

export default {
  data() {
    return { count: 0 }
  },
  created() {
    console.log('組件創建完成')
  },
  mounted() {
    console.log('DOM已掛載')
  }
}

?? Vue3 生命周期

Vue3 提供了與 Vue2 一致的生命周期概念，并新增組合式 API 的方式定義。

組合式 API 寫法

import { onMounted, onUpdated, onUnmounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('Vue3 組件掛載')
    });
  }
}

Vue3 生命周期鉤子對比：

Vue 3 新特性與優勢

1. Composition API（組合式API）

   • 把零散的代碼邏輯按功能打包成「積木塊」，想用哪塊插哪塊，告別滿屏亂跳的 data 和 methods。

   • 示例代碼：

     <script setup>
     // 以前：data、methods、computed 散落各處
     // 現在：按功能聚合
     import { ref, computed } from 'vue'
     
     // 計數器邏輯打包成一個「積木塊」
     function useCounter() {
       const count = ref(0)
       const double = computed(() => count.value * 2)
       const increment = () => count.value++
       return { count, double, increment }
     }
     
     // 直接插到組件里用
     const { count, double, increment } = useCounter()
     </script>
     

2. 性能暴擊（Proxy 取代 defineProperty）

   • Vue2 用「貼紙條」（Object.defineProperty）監聽數據，Vue3 改用「監控攝像頭」（Proxy），數組修改、對象新增屬性再也不用手動 $set。

   • 示例代碼：

     // Vue2：數組 push 需要特殊處理
     this.$set(this.list, index, newValue)
     
     // Vue3：直接莽，全自動監聽
     const list = reactive([1, 2, 3])
     list.push(4) // 觸發響應式更新
     

3. 按需編譯 + Tree Shaking

   • 打包時只帶走真正用到的代碼，比如不用 v-model 就不打包相關邏輯，項目體積瘦身 30%+。

4. 碎片化組件（Fragment + Teleport）

   • 組件終于能像普通 HTML 一樣寫多個根標簽（不用強行套 div），還能用 <Teleport> 把模態框「傳送」到 body 根部，避免 CSS 層級問題。

   • 示例代碼：

     <template>
       <!-- 合法！多個根元素 -->
       <header>標題</header>
       <main>內容</main>
     
       <!-- 把彈窗傳送到 body 末尾 -->
       <Teleport to="body">
         <div class="modal">我是全局彈窗</div>
       </Teleport>
     </template>
     

5. TypeScript 原生支持

   • 代碼提示精準到毛孔，類型檢查直接內置，再也不用和 Vue.extend 斗智斗勇。

   • 示例代碼：

     interface User {
       id: number
       name: string
     }
     
     const user = ref<User>({ id: 1, name: '張三' }) // 類型安全！
     

6. 其他實用武器庫

   • Suspense：異步組件加載時顯示 loading 狀態（類似 React）。
   • 自定義渲染器：用 Vue 語法開發小程序/Canvas 應用。
   • Vite 加持：秒級熱更新，告別 webpack 漫長等待。

?? Vue 組件相關生命周期

示例：異步組件

import { defineAsyncComponent } from 'vue';

const MyAsync = defineAsyncComponent(() => import('./MyComponent.vue'));

?? 小程序生命周期

頁面生命周期

onLoad → onShow → onReady → onHide → onUnload

組件生命周期

created → attached → ready → detached

示例：頁面

Page({
  onLoad(query) {
    console.log('頁面加載', query);
  },
  onReady() {
    console.log('頁面初次渲染完成');
  }
})

示例：組件

Component({
  lifetimes: {
    created() {
      console.log('組件創建');
    },
    ready() {
      console.log('組件渲染完成');
    }
  }
})

? 總結對比

適配建議：

• 如果要構建大規模應用，Vue3 推薦使用組合式 API 搭配 TypeScript；
• 小程序推薦封裝一層統一生命周期處理，方便復用；
• Vue2 項目可以漸進遷移 Vue3，重構時可引入 Composition API。

?? 推薦工具：

• Vue3 Composition API 官方指南
• 小程序開發者工具調試生命周期
• Vueuse 處理常見生命周期邏輯