码迷,mamicode.com
首页 > 其他好文 > 详细

vue生命周期

时间:2019-05-31 11:43:12      阅读:95      评论:0      收藏:0      [点我收藏+]

标签:跳转   guide   white   更新   color   code   space   size   pre   

vue生命周期图示 跳转链接

 1 beforeCreate(){
 2     console.log(‘组件实例化之前‘)
 3 },
 4 created(){
 5     console.log(‘组件实例化完毕,单页面还未显示‘)
 6 },
 7 beforeMount(){
 8     console.log(‘组件挂载前,页面仍未展示,但虚拟Dom已经配置‘)
 9 },
10 mounted(){
11     console.log(‘组件挂在后,此方法执行后,页面显示‘)
12 },
13 beforeUpdate(){
14     console.log(‘组件更新前,页面仍未更新,但虚拟Dom已经配置‘)
15 },
16 updated(){
17     console.log(‘组件更新,此方法执行后,页面显示‘)
18 },
19 beforeDestroy(){
20     console.log(‘组件销毁前‘)
21 },
22 destroyed(){
23     console.log(‘组件销毁‘)
24 },

 

各个钩子函数执行时浏览器对应做了什么

beforeCreate  --------- 组件实例化之前

created  --------- 组件实例化完毕,单页面还未显示

beforeMount  --------- 组件挂载前,页面仍未展示,但虚拟DOM已经配置

mounted  --------- 组件挂载后,此方法执行后,页面显示

beforeUpdate  --------- 组件更新前,页面仍未更新,但虚拟Dom已经配置

updated  --------- 组件更新,此方法执行后,页面显示

beforeDestroy  --------- 组件销毁前

destroyed  --------- 组件销毁

 

组件实例化之前

vue生命周期

标签:跳转   guide   white   更新   color   code   space   size   pre   

原文地址:https://www.cnblogs.com/chz1905/p/10954366.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!