vue生命周期 钩子函数

vue生命周期图示 跳转链接

 

beforeCreate(){
    console.log('组件实例化之前')
},
created(){
    console.log('组件实例化完毕，单页面还未显示')
},
beforeMount(){
    console.log('组件挂载前，页面仍未展示，但虚拟Dom已经配置')
},
mounted(){
    console.log('组件挂在后，此方法执行后，页面显示')
},
beforeUpdate(){
    console.log('组件更新前，页面仍未更新，但虚拟Dom已经配置')
},
updated(){
    console.log('组件更新，此方法执行后，页面显示')
},
beforeDestroy(){
    console.log('组件销毁前')
},
destroyed(){
    console.log('组件销毁')
},

 

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

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

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

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

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

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

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

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

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

 

组件实例化之前