vue2&vue3&Official website official website official website official website official website official website official website official website official website official website official website official website official website official website officia

Detailed explanation of the life cycle of Vue2, Vue3, and mini program pages

This article will compare the life cycles of Vue2, Vue3 and mini program pages/components, and simply sort out their respective characteristics, differences, and new optimization points.

📦 Vue2 life cycle

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

illustrate:

Life cycle hook	meaning
beforeCreate	Data is not mounted before instance initialization
created	The instance is created and data is accessible
beforeMount	Before mount, $el and template have been generated but not inserted into the DOM
mounted	The mount is complete and the DOM is accessible
beforeUpdate	Triggered before data update
updated	Triggered after data is updated (after DOM is updated)
beforeDestroy	Cleaning can be done before the instance is destroyed
destroyed	After the instance is destroyed

Example:

export default {
   data() {
     return { count: 0 }
   },
   created() {
     ('Component creation is complete')
   },
   mounted() {
     ('DOM mounted')
   }
 }

🚀 Vue3 Lifecycle

Vue3 provides a life cycle concept consistent with Vue2 and adds a way to define a combination API.

Combination API writing

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

 export default {
   setup() {
     onMounted(() => {
       ('Vue3 component mount')
     });
   }
 }

Vue3 life cycle hook comparison:

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

Vue 3 New Features and Advantages

Composition API (combination API)

Pack the scattered code logic into "building blocks" according to functions, insert them as much as you want, and say goodbye to the full screen of jumping arounddataandmethods。

Sample code：

<script setup>
 // In the past: data, methods, computed scattered everywhere
 // Now: Aggregate by function
 import { ref, calculated } from 'vue'

 // The counter logic is packaged into a "building block"
 function useCounter() {
   const count = ref(0)
   const double = computed(() => * 2)
   const increment = () => ++
   return { count, double, increment }
 }

 // Insert directly into the component
 const { count, double, increment } = useCounter()
 </script>

Performance Critical Hit (Proxy replaces defineProperty)
- Vue2 uses "stick stick" () Monitoring data, Vue3 uses "surveillance camera" instead (Proxy), no need to manually modify arrays and add new attributes to objects$set。
- Sample code：
```
// Vue2: Array push requires special processing
 this.$set(, index, newValue)

 // Vue3: Direct and automatic monitoring
 const list = reactive([1, 2, 3])
 (4) // Trigger responsive update
```
Compile on demand + Tree Shaking
- When packaging, only take away the actual code, such as not using it.v-modelI won’t package the relevant logic, and the project size will lose 30%+.

Fragment + Teleport

The component can finally write multiple root tags like ordinary HTML (no forced condomsdiv), can still be used<Teleport>"Transfer" the modal box tobodyRoot, avoid CSS hierarchy issues.

Sample code：

<template>
   <!-- Legal!  Multiple root elements -->
   <header>Title</header>
   <main>Content</main>

   <!--Transfer pop-up window to the end of body -->
   <Teleport to="body">
     <div class="modal">I am a global pop-up window</div>
   </Teleport>
 </template>

TypeScript native support
- The code prompts accurate to pores, and the type check is directly built-in, so you will never need toFight wits and courage.
- Sample code：
```
interface User {
   id: number
   name: string
 }

 const user = ref<User>({ id: 1, name: 'Zhang San' }) // Type safe!
```
Other practical arsenals
- Suspense: The loading status is displayed when the asynchronous component is loaded (similar to React).
- Custom renderer: Use Vue syntax to develop applet/Canvas applications.
- Vite support: Second-level hot update, say goodbye to webpack for a long wait.

🧩 Vue component related life cycle

life cycle	meaning
props update	Both Vue2 and Vue3 can listen for props changes (via watch)
slot rendering	The slot content can be accessed after mounted
Asynchronous Components	Vue3 supports defineAsyncComponent to encapsulate asynchronous components

Example: Asynchronous Components

import { defineAsyncComponent } from 'vue';

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

💡 Mini Program Life Cycle

Page life cycle

onLoad → onShow → onReady → onHide → onUnload

life cycle	meaning
onLoad	Page loading, accept parameters
onShow	The page shows, similar to activated
onReady	The page rendering is completed for the first time
onHide	Page Hide
onUnload	Page uninstall

Component life cycle

created → attached → ready → detached

life cycle	meaning
created	The component instance has just been created
attached	Node Insert Page DOM
ready	Component layout is completed
detached	Node removed from page

Example: Page

Page({
   onLoad(query) {
     ('Page Loading', query);
   },
   onReady() {
     ('The page is rendered for the first time');
   }
 })

Example: Components

Component({
   lifetimes: {
     created() {
       ('Component Creation');
     },
     ready() {
       ('Component rendering is completed');
     }
   }
 })

✅ Summary and comparison

platform	Life cycle granularity	Features
Vue2	Clear but coupled	Life cycles are concentrated in Options
Vue3	More flexible	Composition API is more conducive to logical reuse and better type support
Mini Program	Page/component	Life cycle is closer to the native environment and is suitable for event-driven models

Adaptation suggestions:

If you want to build large-scale applications, Vue3 recommends using a combination API with TypeScript;
Mini programs recommend encapsulating a layer of unified life cycle processing for easy reuse;
Vue2 projects can be migrated incrementally by Vue3, and the Composition API can be introduced during refactoring.

📘 Recommended tools:

Vue3 Composition API Official Guide

Mini Program Developer Tool Debugging Lifecycle

Vueuse handles common life cycle logic