生命周期
概念:从Vue实例创建、运行、销毁时,总伴随着各种事件,而那些事件统称为生命周期
生命周期钩子 = 生命周期函数 = 生命周期事件
此图来源于Vue官网
初始化阶段
new Vue() ->初始化一个空的Vue实例,仅有一些默认的生命周期函数和默认方法-> 初始化数据和方法
模板编译
会校验el属性,再查看是否具有template -->辨别是将html模块编译成模板还是直接模板
此时该模板字符串便被渲染为 内存中的DOM,即还未被加载于页面
页面渲染
将刚才的模板字符串渲染到浏览器的页面中来
运行阶段
本阶段会查看数据是否有变化–>Yes,则重新渲染、挂载页面
销毁阶段
相关钩子函数
var vm = new Vue({
el: "#app",
data:{},
beforeCreate(){//实例被完全创建出来前执行
//在该周期,data和method都还未被初始化
},
created(){ //
//此时,data和method都已初始化
},
beforeMount(){
//模板已编译于内存中,但未被页面渲染
//即{{}} 还未有效
},
mounted(){
//当执行该函数时,实例已被完全创建好了。若没有后续操作,则一直放置于内存中
},
beforeUpdate(){
//数据发生改变时,this.data已发生变化,但html的value未改变
},
updated(){
//数据的变化,页面也已渲染完成
},
beforeDestroy(){
//此时,实例的相关内容仍然有效
},
destroyed(){
//实例已被销毁,相关内容已无效
}
})