每次讲起这个，总是模棱两可的，今天花点时间总结一下
所谓生命周期，就是Vue 实例从创建到销毁的过程。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。
beforeCreate
beforeCreate:function(){
console.log("--------创建之前--------");
console.log("此时的$data是------> " + this.$data);
console.log("此时的test是------> " + this.test);
console.log("此时的$el是------> " + this.$el);
},
created
created:function(){
console.log("--------创建之后--------");
console.log("此时的$data是------> " + this.$data);
console.log("此时的test是------> " + this.test);
console.log("此时的$el是------> " + this.$el);//此时还属于未挂载
}
beforeMount
beforeMount:function(){
console.log("--------挂载之前--------");
console.log("此时的$data是------> " + this.$data);
console.log("此时的test是------> " + this.test);
console.log("此时的$el是------> " + this.$el);//虚拟的dom
console.log(this.$el);
},
mounted
mounted:function(){
console.log("--------挂载之后--------");
console.log("此时的$data是------> " + this.$data);
console.log("此时的test是------> " + this.test);
console.log("此时的$el是------> " + this.$el);//真实的dom
console.log(this.$el);
},
beforeUpdate
beforeUpdate:function(){
console.log("--------更新之前--------");
console.log("此时的$data是------> " + this.$data);
console.log("此时的test是------> " + this.test);
console.log("此时的$el是------> " + this.$el);//虚拟的dom
},
此时页面上也更新成bbbb
updated
updated:function(){
console.log("--------更新之后--------");
console.log("此时的$data是------> " + this.$data);
console.log("此时的test是------> " + this.test);
console.log("此时的$el是------> " + this.$el);//真实的dom
},
beforeDestroy、 destroyed
beforeDestroy:function(){
console.log("--------销毁之前--------");
console.log("此时的$data是------> " + this.$data);
console.log("此时的test是------> " + this.test);
console.log("此时的$el是------> " + this.$el);
},
destroyed:function(){
console.log("--------销毁之后--------");
console.log("此时的$data是------> " + this.$data);
console.log("此时的test是------> " + this.test);
console.log("此时的$el是------> " + this.$el);
},
但此时在虚拟的dom中仍然能找到
但是此时修改
此时页面中真实的dom却不会改变
因为此时已经被销毁这个vue对象跟app已经不挂钩了 ，他们之间没有任何关系了
那么怎么让他们再回来呢，再重新执行下挂载方法
使用方法总结：
beforecreate : 一般页面的loading事件会放这个里面
created ：在这结束loading，还做一些初始化，实现函数自执行 ，异步请求也适宜在这里调用
mounted ： 在这发起后端请求，拿回数据，获取到DOM节点，配合路由钩子做一些事情
updated : 如果对数据统一处理，在这里写上相应函数
beforeDestroy：如果要删除某些组件，可以在这里添加判断 你确认删除吗？
destroyed ：当前组件已被删除，清空相关内容
面试常问题：
1.生命周期created和mounted的区别
created:在模板渲染成html前调用，即初始化某些属性值，然后再渲染成视图
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
两者比较：通常created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行操作，比如插件chart.js的使用：var id = document.getElementById(id);
通常会有这一步，而如果你写入组件中，你会发现created中无法对chart 进行一些初始化配置，一定要等这个html渲染完成后才可以进行，那么mounted就是不二之选。下面看一个例子(用组件)。
<div id="app">
<my-component></my-component>
</div>
<script>
Vue.component("my-component",{
data:function(){
return {
cname:"",
id:"",
pname:""
}
},
template:"<ul><li id='classify'>{{cname}}</li><li>{{id}}</li><li>{{pname}}</li></ul>",
created:function(){
this.cname="食品饮料"
this.id = 3
this.pname ="休闲食品"
var classify = document.getElementById("classify");//第一个命令台错误
console.log('0000')
console.log(classify.innerHTML,'created');
},
mounted:function(){
var classify = document.getElementById("classify");//第二个命令台输出的结果
console.log(classify.innerHTML,'mounted');
}
});
var vm = new Vue({
el:"#app"
})
</script>
页面
控制台
不难发现，created赋予初始值的情况下页面成功渲染出来了，但控制台中却报错了，但是打印出000说明还是有走到这一步的，实际上是因为找不到id,即getElementById(id)并没有找到元素，原因是在created的时候，视图的html并没有渲染出来，所以此时去操作html的dom节点，并不能找到相关元素，而在mounted里，此时的html已经渲染出来了，所以可以直接操作dom节点，所以可以打印出来
2.DOM 渲染在 什么周期中就完成
DOM 渲染在 mounted 中就已经完成了。
3.第一次页面加载会触发哪几个钩子函数
beforeCreate, created, beforeMount, mounted
参照的文章(写这篇文章，拖得周期比较长，之前也参照许多好的文章，所以并不完整，感谢！)：
https://blog.csdn.net/WeiAiGeWangFeiYuQing/article/details/83280530
https://blog.csdn.net/xdnloveme/article/details/78035065
网友评论