vue生命周期理解

XGTX1998

于 2022-01-21 18:29:28 发布

阅读量454

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_44950078/article/details/122626636

版权

本文详细介绍了Vue.js中组件从创建到销毁的整个生命周期过程，并通过具体示例解释了各个生命周期钩子函数的应用场景及其调用时机。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先说明一下浏览器的渲染过程：
1、构建DOM树
2、构建css规则树,根据执行顺序解析js文件。
3、构建渲染树Render Tree
4、渲染树布局layout
5、渲染树绘制

生命周期分为8个过程：
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
boforeDestory
destoryed

//可以通过卡断点去测试每个阶段页面的状态
	beforeCreate(){
        debugger
    },
    created(){
        debugger
    },//可以访问Data中的数据，methods中的方法
    beforeMount(){
        debugger
    },
    mounted(){
        console.log('mounted')
        debugger
    },//浏览器上页面已经渲染（数据还没有）
    beforeUpdate(){
        debugger
    },
    updated(){
        debugger
    },//所有的数据都是新的，data中的数据和请求接口，methods中的方法这些信息都已经更新完毕
    beforeDestroy() {
        debugger
    },
    destroy() {
        debugger
    },

如果有理解的错误，请各位大佬指出