vue2&vue3&小程序简介

Vue2、Vue3、小程序页面生命周期详解

本篇将对比 Vue2、Vue3 以及小程序页面/组件的生命周期，简单梳理各自特点、差异、新增优化点。

---

📦 Vue2 生命周期

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

说明：

生命周期钩子	含义
beforeCreate	实例初始化之前，数据未挂载
created	实例创建完成，data 可访问
beforeMount	挂载前，$el 和模板已生成但未插入 DOM
mounted	挂载完成，DOM 可访问
beforeUpdate	数据更新前触发
updated	数据更新后触发（更新 DOM 后）
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 生命周期钩子对比：

Vue2	Vue3 Options API	Vue3 Composition API
beforeCreate	beforeCreate	setup() 中逻辑
created	created	setup() 中逻辑
beforeMount	beforeMount	onBeforeMount
mounted	mounted	onMounted
beforeUpdate	beforeUpdate	onBeforeUpdate
updated	updated	onUpdated
beforeDestroy	beforeUnmount	onBeforeUnmount
destroyed	unmounted	onUnmounted

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 组件相关生命周期

生命周期	含义
props 更新	Vue2 和 Vue3 均可监听 props 变化（通过 watch）
slot 渲染	在 mounted 后插槽内容可以访问
异步组件	Vue3 支持 defineAsyncComponent 封装异步组件

示例：异步组件

import { defineAsyncComponent } from 'vue';

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

---

💡 小程序生命周期

页面生命周期

onLoad → onShow → onReady → onHide → onUnload

生命周期	含义
onLoad	页面加载，接受参数
onShow	页面显示，类似 activated
onReady	页面初次渲染完成
onHide	页面隐藏
onUnload	页面卸载

组件生命周期

created → attached → ready → detached

生命周期	含义
created	组件实例刚创建
attached	节点插入页面 DOM
ready	组件布局完成
detached	节点从页面移除

示例：页面

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

示例：组件

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

---

✅ 总结对比

平台	生命周期粒度	特点
Vue2	清晰但耦合	生命周期集中在 Options 中
Vue3	更灵活	Composition API 更利于逻辑复用、类型支持更好
小程序	分页面/组件	生命周期更贴近原生环境，适合事件驱动模型

适配建议：

• 如果要构建大规模应用，Vue3 推荐使用组合式 API 搭配 TypeScript；
• 小程序推荐封装一层统一生命周期处理，方便复用；
• Vue2 项目可以渐进迁移 Vue3，重构时可引入 Composition API。

---

📘 推荐工具：

• Vue3 Composition API 官方指南
• 小程序开发者工具调试生命周期
• Vueuse 处理常见生命周期逻辑