实例1 :
代码：
输入templatedivclass=' index-wrap ' El-inputv-model=' message ' placeholder='内容'/El-inputp{{message}}/p beforeCreate: function () console.group(beforecreate创建前的状态=========' El 3360 ' this.$ El (/undefined cocode ) ' data : ' this.$data )/und data ' message 3360 ' this.message ] console.log (El.innerhtml 3360 ' this.$ El.inel ) created 3360 function ((console.group ) (' created已创建状态===========() ) ) (console.log ) ) %c%s ' color:red )、' data : ' this.$data ) /已初始化' message3360'this.message(/已初始化的console.log ) ) El.ing efore mount 3360 function ((console.group (' before mount装载前的状态==============) ) 已初始化的console.log ) this.$El ) console.log )、' %c%s )、' color:red )和' data:red )。 ' color:red '， ' message3360'this.message(/console.log ) El.innerhtml 3360 ' this.$ El.innerhtml ) )已初始化mounted 3360 function ((console.group (' mounted moup ) ，) ) ) 652 'El3360'this.$El(/初始化的console.log (this.$ El ) console.log )、' %c%s )、' color 3360 rerer ' message3360'this.message(/console.log ) El.innerhtml 3360 ' this.$ El.innerhtml ) )已初始化before update : function ((console.group (' beffore.inerhtml ) ) ) console.log () ' El 3360 ' this.$ El (console.log (this.$ El ) console.log ) ) %c%s )、' color:red message 3360 ' this.message ] console.log (El.innerhtml 3360 ' this.$ El.innerhtml ) }，updated 3360 function (控制
console.log('%c%s', 'color:red', 'data : ' + this.$data) console.log('%c%s', 'color:red', 'message: ' + this.message) console.log('el.innerHTML : ' + this.$el.innerHTML) }, beforeDestroy: function() { console.group('beforeDestroy 销毁前状态===============》') console.log('%c%s', 'color:red', 'el : ' + this.$el) console.log(this.$el) console.log('%c%s', 'color:red', 'data : ' + this.$data) console.log('%c%s', 'color:red', 'message: ' + this.message) console.log('el.innerHTML : ' + this.$el.innerHTML) }, destroyed: function() { console.group('destroyed 销毁完成状态===============》') console.log('%c%s', 'color:red', 'el : ' + this.$el) console.log(this.$el) console.log('%c%s', 'color:red', 'data : ' + this.$data) console.log('%c%s', 'color:red', 'message: ' + this.message) console.log('el.innerHTML : ' + this.$el.innerHTML) }}</script><style scoped></style>
只刷新，不改变数据时：
输入1之后：（注意观察，更新前没有1，更新后的打印值有1了）
资料：
vue生命周期图示中英文版Vue实例生命周期钩子 - 大自然的流风 - 博客园vue生命周期图示中英文版Vue实例生命周期钩子。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，https://www.cnblogs.com/zdz8207/p/vue-lifecycle.html
vue生命周期的理解_小毛驴的博客-CSDN博客_vue生命周期Vue实例从创建到销毁的过程，就是生命周期。详细来说也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。https://blog.csdn.net/haochangdi123/article/details/78358895?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522163815435716780274137714%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=163815435716780274137714&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-78358895.pc_search_mgc_flag&utm_term=vue+%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F&spm=1018.2226.3001.4187
实例2：
超详细vue生命周期解析(详解)_ら寂寞的柠檬的博客-CSDN博客_vue生命周期vue是每一个前端开发人员都绕不过的一个技术，在国内的市场占有量也是非常的大，我们大部分人用着vue, 却不知道他内部其实经历了一些什么。每个生命周期又是什么时候开始执行的。我们今天来详细的看一看首先，生命周期是个啥？借用官网的一句话就是：每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期。在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。那么这些过程中，具体vue做了些啥，我们今天来了解一下。语述了解之前，我们先贴上一张官网的.https://blog.csdn.net/weixin_42707287/article/details/111641286?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522163815616116780274191108%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=163815616116780274191108&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~hot_rank-1-111641286.pc_search_mgc_flag&utm_term=vue+%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F&spm=1018.2226.3001.4187
实例3：代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://unpkg.com/vue/dist/vue.js"></script><style></style></head><body><div id="app"><h1>{{data}}</h1></div></body><script>var myVue = new Vue({el: "#app",data: {data: "aaaaa",info: "nono"},beforeCreate: function() {console.log("创建前========")console.log(this.data)console.log(this.$el)},created: function() {console.log("已创建========")console.log(this.info)console.log(this.$el)},beforeMount: function() {console.log("mount之前========")console.log(this.info)console.log(this.$el)},mounted: function() {console.log("mounted========")console.log(this.info)console.log(this.$el)},beforeUpdate: function() {console.log("更新前========");},updated: function() {console.log("更新完成========");},beforeDestroy: function() {console.log("销毁前========")console.log(this.info)console.log(this.$el)},destroyed: function() {console.log("已销毁========")console.log(this.info)console.log(this.$el)}})</script></html>将上面的代码复制粘贴运行。在控制台可以看见创建前后，和挂载前后：
我们可以看见。挂载前data是虚拟的，挂载后才是真实的data
然后我们在控制台输入：myVue.data='bbb' 促使数据更新，然后再看控制台：
页面上之前是a更新后变成了b
然后我们继续输入：myVue.$destroy()再看控制台：可以看到销毁前后：
资料：
Vue生命周期 - 浅白 - 博客园https://www.cnblogs.com/gagag/p/6246493.html