一、生命周期简介
1. 整个vue运行的流程中 vue向程序员在固定阶段提供方法
2. 初始化 程序开始运行
挂载 展示页面
更新 用户更改了数据
销毁 关闭
二、生命周期函数
-- 生命周期函数 -- 钩子函数 以下是执行顺序
A. beforeCreate
1. Vue实例化之前执行
2. 还没有进行methods,data数据初始化
B. created
1. Vue实例化之后执行
2. methods,data等完成了,watch,computed,可以获取到数据;
3. 发送ajax请求
C. beforeMount
1. 虚拟DOM挂载之前执行 模板已经编译完成没有挂载
D. mounted
1. 虚拟DOM挂载完之后执行
E. beforeUpdate
1. 数据更新之前执行
F. updated
1. 数据更新之后执行
G. beforeDestroy
1. vue组件销毁之前执行
2. 移除自定义事件,定时器,取消ajax请求
H. destroyed
1. vue组件销毁之后执行
· 只有第一次才会执行的函数
beforeCreate created beforeMount mounted
· 数据更新,只有数据更新就会执行
beforeUpdate updated
· 销毁一次
beforeDestroy destroyed
let vm = new Vue({
el: "#app",
// template:"<div>{{name}}--template</div>",
data() {
return {
name:"666"
}
},
// vue初始化
beforeCreate(){
console.log("Vue实例化之前执行",this.name);
},
created(){
console.log("Vue实例化之后执行",this.name);
},
beforeMount(){
console.log("虚拟DOM挂载之前执行");
},
mounted(){
console.log(" 虚拟DOM挂载完之后执行");
},
// vue数据更新
beforeUpdate(){
console.log(" 数据更新之前执行");
},
updated(){
console.log(" 数据更新之后执行");
},
// vue销毁
beforeDestroy(){
console.log(" vue组件销毁之前执行");
},
destroyed(){
console.log(" vue组件销毁之后执行");
}
})