开发者学堂课程【微服务+全栈在线教育实战项目演练(SpringCloud Alibaba+SpringBoot):前端技术-vue 生命周期】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/667/detail/11311
前端技术-vue 生命周期
内容介绍
一、实例生命周期
二、vue 生命周期演示
一、实例生命周期
vue 在创建过程中有生命周期,指对象从创建到销毁过程
首先执行 beforeCreat,beforeCreat 表示在创建前执行 created 表示在数据渲染前进行,先执行 beforeCreat 再执行 created。数据渲染后执行 beforeMount 和mounted。
数据渲染内容进行修改执行 beforeUpdate 和 updated。页面循环完成以及数据渲染完成后执行 beforeDestroy,最后执行 destroy 将 vue 对象销毁。
重点掌握 created 和 mounted。
二、vue生命周期演示
new Vue({
el:'#app',
data:{
},
created(){
debugger
//在页面渲染之前执行
console.log('created....' },
},
mounted(){
debugger
//在页面渲染之后执行
console. 1og('mounted....')
}
})
先生成 vue.html 代码加入 debugger 断点调试。前端加断点不如后端好用,但是也可以做到,程序到 debugger 加入处就会停止。
执行,刷新会出现 paused in debugger 提示,代表断点已经生效。
有两个操作,一个是半圆表示向下执行 stept over next function call。
箭头表示执行到下一个方法,也就是向下一个断点执行。目前断点到 created,点击箭头执行到下一个断点 mounted。
证明执行顺序是先 created 后 mounted。