vue生命周期是从vue实例声明到销毁的一个过程，看了很多博主的博客，个人感觉弄懂Vue官方文档的生命周期图才是王道。好吧并不是很清楚，不过大家应该都知道这张图。
为了更好的理解，下面用代码展示下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue生命周期方法</title>
<!--引入vue框架-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
msg:"hello world"
},
methods:{
say:function () {
console.log("IT程序员的日常");
}
},
beforeCreate:function () {
/*执行beforeCreate的时候,表示Vue刚刚出生,还没有任何内容,data/methods都没有初始化*/
console.log('我还没出生，beforeCreate--'+this.msg);
this.say();
console.log('我还没出生，beforeCreate--'+this.say);
},
created:function () {
/*执行created的时候,表示Vue实例已经初始化好了部分内容,data/methods
* 想在Vue实例中最早访问到data/methods,只有在这个方法才能访问
*/
console.log('created--'+this.msg);
this.say();
console.log('created--'+this.say);
},
beforeMount:function () {
/*执行beforeMount,表示已经根据数据编译好了模板,但是还没有渲染到界面上*/
console.log('beforeMount'+document.querySelector("p").innerText);
console.log('beforeMount'+document.querySelector("p").innerHTML);
},
mounted:function () {
/*执行mounted,表示已经根据数据编译好了模板,已经将模板有渲染到界面上,此时可以对界面进行其他操作了*/
console.log('mouted--'+document.querySelector("p").innerText);
console.log('mouted--'+document.querySelector("p").innerHTML);
},
beforeUpdate:function(){
/*主要data中的数据发生了变化就会执行
* 执行beforeUpdate时候,data的数据已经是最新的了,但是没有更新界面上的数据
*
* */
console.log(this.msg);
console.log('beforeUpdate'+document.querySelector("p").innerText);
console.log('beforeUpdate'+document.querySelector("p").innerHTML);
},
updated:function () {
/*主要data中的数据发生了变化就会执行
* 执行updated时候,data的数据已经是最新的了,界面上的数据也已经更新
*
* */
console.log(this.msg);
console.log('updated1--'+document.querySelector("p").innerText);
console.log('updated2--'+document.querySelector("p").innerHTML);
},
beforeDestroy:function(){
/*执行beforeDestroy的时候,表示Vue实例即将销毁,但是还未销毁,实例中的数据等都可以使用
* 最后能使用Vue实例的地址
* */
},
destroyed:function () {
/*
* 执行destroyed的时候,表示vue实例完全销毁,实例中的任何内容都不能被使用了
* */
}
})
</script>
</body>
</html>
