vue文档上面提供的生命周期图示很详细,具体看下面
生命周期中提供的一系列钩子函数非常重要,包含有:beforeCreate() ,created(),beforeMount(),mounted(),beforeUpdate(),updated(), beforeDestroy(),desctroyed(),
下面对上面的一些钩子函数采用我们前面案例中的header.vue进行代码演示。
在header.vue中加入一些钩子函数进行演示。
beforeCreate: function() {
alert("组件实例化之前执行的函数");
},
created: function() {
alert("组件实例化完毕,但页面还未显示");
},
beforeMount: function() {
alert("组件挂载前,页面仍未展示,但虚拟dom已经配置完");
},
mounted: function() {
alert("组件挂载后,此方法执行后页面显示.");
},
beforeUpdate: function() {
alert("组件更新前,页面仍未更新。但虚拟dom已经配置");
},
updated: function(){
alert("组件更新,此方法执行后,页面显示");
},
beforeDestroy: function(){
alert("组件销毁前");
},
destroyed: function(){
alert("组件已销毁");
}
可以刷新自己的网页,根据alert的提示,看看vue的生命周期执行的事件。
Vue系列文章目录
- vue系列文章(1):对象绑定,属性绑定
- Vue系列文章(2)事件绑定,鼠标点击事件
- vue系列文章(3):事件修饰符
- Vue系列文章(4)键盘事件及键盘修饰符
- vue系列文章(5)双向数据绑定
- vue系列文章(6)计算属性computed
- vue系列文章(7)动态CSS类型绑定
- vue系列文章(8)条件渲染
- vue系列文章(9)v-for条件循环
- vue系列文章(10)vue实战项目demo
- vue系列文章(11):初始化多个实例对象
- vue系列文章(12)初始组件的应用
- Vue系列文章(13)vue cli脚手架
- vue系列文章(14)vue-cli脚手架,组件嵌套,全局组件注册和局部组件注册
- vue系列文章(15)属性传值props
- vue系列文章(16)传值和传引用的类型和区别
- vue系列文章(17)利用事件传递将子组件值传递给父组件
- vue系列文章(18)vue生命周期
- vue系列文章(19)vue路由配置
- vue系列文章(20) vue网络请求vue-resource
如果上面文章对你有用,打赏下我吧@*@