Vue2 Vue3 生命周期

 

 

 Vue2:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54

<template>   <span>     <span id="msg">{{msg}}</span>     <input type="button" value="修改" @click="f1">   </span> </template>   <script>   export default {     data() {       return {         msg: 'HelloWorld'       }     },     methods: {       hello(str) {         console.log(str + 'hello')       },       f1() {         this.msg = 'HelloVue'       }     },     beforeCreate() {       // beforeCreate在Vue实例创建之前，data中的数据和methods中的方法并没有初始化       // console.log('beforeCreate:' + this.msg) // undefined       // this.hello('beforeCreate:') // 报错     },     created() {       // 在created生命周期函数中，data中的数据和methods中的方法已经被初始化完成       console.log('created:' + this.msg) // HelloWorld       this.hello('created:') // hello     },     beforeMount() {       // 在beforeMount生命周期函数中，Vue开始编译模板、渲染数据，但数据只是在内存中渲染的，并没有真实挂载到HTML页面上       console.log('beforeMount:' + this.msg) // HelloWorld       // console.log('beforeMount:' + document.getElementById('msg').innerText)       console.log('beforeMount:' + document.getElementById('msg')) // null     },     mounted() {       // mounted生命周期函数，内存中的数据已经挂载到页面中，Vue实例创建完成       console.log('mounted:' + document.getElementById('msg').innerText) // HelloWorld     },     beforeUpdate() {       // beforeUpdate，Vue只是在内存中完成了编译，并没有挂载到真实页面中       console.log('beforeUpdate:' + this.msg) // HelloVue 是新的       console.log('beforeUpdate:' + document.getElementById('msg').innerText) // HelloWorld 是旧的     },     updated() {       // updated,把内存中修改后的数据挂载到页面中       console.log('updated:' + this.msg) // HelloVue 是新的       console.log('updated:' + document.getElementById('msg').innerText) // HelloVue 是新的     }   } </script>

　　

Vue3:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53

<template>     <span>         <span id="msg">{{msg}}</span>         <input type="button" value="修改" @click="f1">     </span> </template>   <script setup>     import {         onBeforeMount,         onMounted,         onBeforeUpdate,         onUpdated,         onBeforeUnmount,         onUnmounted,         onActivated,         onDeactivated,         onErrorCaptured,         ref     } from "vue"       var msg = ref("HelloWorld");       function f1() {         console.log("f1:" + msg.value)         msg.value = 'HelloVue'     }       onBeforeMount(() => {         // 在beforeMount生命周期函数中，Vue开始编译模板、渲染数据，但数据只是在内存中渲染的，并没有真实挂载到HTML页面上         console.log('beforeMount:' + msg.value) // HelloWorld         // console.log('beforeMount:' + document.getElementById('msg').innerText)         console.log('beforeMount:' + document.getElementById('msg')) // null     })       onMounted(() => {         // mounted生命周期函数，内存中的数据已经挂载到页面中，Vue实例创建完成         console.log('mounted:' + document.getElementById('msg').innerText) // HelloWorld     })       onBeforeUpdate(() => {         // beforeUpdate，Vue只是在内存中完成了编译，并没有挂载到真实页面中         console.log('beforeUpdate:' + msg.value) // HelloVue 是新的         console.log('beforeUpdate:' + document.getElementById('msg').innerText) // HelloWorld 是旧的     })       onUpdated(() => {         // updated,把内存中修改后的数据挂载到页面中         console.log('updated:' + msg.value) // HelloVue 是新的         console.log('updated:' + document.getElementById('msg').innerText) // HelloVue 是新的     })   </script>

　　

 

官方文档: 

https://v2.cn.vuejs.org/v2/guide/instance.html#生命周期图示

https://v2.cn.vuejs.org/v2/api/#选项-生命周期钩子

https://cn.vuejs.org/guide/essentials/lifecycle.html#lifecycle-diagram 生命周期图示vue3