Vue与Reac都有lifecycle生命周期的概念,每个组件实例在被创建之前都要经过一系列的初始化过程。
生命周期
指组件从初始化开始到结束的过程 或生命周期是描述组件从开始到结束的过程，每个组件都具有生命周期，都对组件通过生命周期给予的钩子函数进行管理。
钩子函数
指系统某些状态和参数发生改变的时候，系统立马去通知对应处理的函数叫钩子函数
Vue生命周期
触发vue的created事件以后,this便指向vue实例
var mlistVue = new Vue({
data: {
date "内容"
},
created: function () {
//在实例创建之后同步调用,已建立;
//没有开始 DOM 编译，$elment还不存在,但是实例存在,即this.date存在,可打印出来 。
console.log("建立");
},
beforeCompile: function () {
console.log("未开始编译");
},
compiled: function () {
//在编译结束后调用,此时所有的指令已生效，数据的变化将触发 DOM 更新。
console.log("编译完成");
},
ready: function () {
//在编译结束和 $elment第一次插入文档之后调用，在第一次钩子之后调用。
console.log("一切准备好了");
},
attached :function () {
//暂时触发不了
//在 vm.$elment插入 DOM 时调用
console.log("插入DOM成功");
},
detached :function () {
//在 vm.$elment从 DOM 中删除时调用。必须是由指令或实例方法删除，直接操作 vm.$elment不会 触发这个钩子。
console.log("删除DOM成功");
},
beforeDestroy: function () {
//触发方式,在console里面打listVue.$destroy();
//在开始销毁实例时调用。此时实例仍有功能。
console.log("销毁前");
},
destroyed: function () {
//触发方式,在console里面打myVue.$destroy();其中myVue.$destroy(true)是删除DOM节点,会触发detached函数,但实例仍然存在
//在实例被销毁之后调用。此时所有的绑定和实例的指令已经解绑，注意是解绑不是销毁,所有的子实例也已经被销毁。
console.log("已销毁");
}
});
转载大佬：https://www.jb51.net/article/147680.htm