vue生命周期钩子函数详解

全栈程序员-站长 • 2026年3月26日下午7:45 • 未分类 • 阅读 3

先放一张官网生命周期图：
vue生命周期图
vue有8种生命周期函数：

钩子函数	触发的行为	在此阶段可以做的事情
beforeCreadted	vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。	加loading事件
created	vue实例的数据对象data有了，$el还没有	结束loading、请求数据为mounted渲染做准备
beforeMount	vue实例的$el和data都初始化了，但还是虚拟的dom节点，具体的data.filter还未替换。	..
mounted	vue实例挂载完成，data.filter成功渲染	配合路由钩子使用
beforeUpdate	data更新时触发
updated	data更新时触发	数据更新时，做一些处理（此处也可以用watch进行观测）
beforeDestroy	组件销毁时触发
destroyed	组件销毁时触发，vue实例解除了事件监听以及和dom的绑定（无响应了），但DOM节点依旧存在	组件销毁时进行提示

测试代码：
组件模板自己试着写就好，此处贴js代码
（省略部分代码）

export default { data () { return { todos: [], allCounts: 0, filter: 'all', id: 0, states: ['all', 'active', 'completed'] } }, beforeCreate () { console.log('==============' + 'beforeCreated' + '===================') console.log(this.$el) console.log(this.$data) console.log(this.filter) }, created () { console.log('==============' + 'created' + '===================') console.log(this.$el) console.log(this.$data) console.log(this.filter) }, beforeMount () { console.log('==============' + 'beforeMount' + '===================') console.log(this.$el) console.log(this.$data) console.log(this.filter) }, mounted () { console.log('==============' + 'mounted' + '===================') console.log(this.$el) console.log(this.$data) console.log(this.filter) }, beforeUpdate () { console.log('==============' + 'beforeUpdate' + '===================') console.log(this.$el) console.log(this.$data) console.log(this.filter) }, updated () { console.log('==============' + 'updated' + '===================') console.log(this.$el) console.log(this.$data) console.log(this.filter) }, beforeDestroy () { console.log('==============' + 'beforeDestroy' + '===================') console.log(this.$el) console.log(this.$data) console.log(this.filter) }, destroyed () { console.log('==============' + 'destroyed' + '===================') console.log(this.$el) console.log(this.$data) console.log(this.filter) } }

效果：
刷新vue项目时
改变data中的filter时

<tabs> <tab /> <tab /> <tab /> <tab-container />  
   tabs>

/*tabs的打印代码*/ beforeMount () { 
    console.log('============Tabs befortemounted==============') }, mounted () { console.log('============Tabs mounted==============') }, created () { console.log('============Tabs created==============') } /*tab的打印代码*/ beforeMount () { 
    console.log('----------------tab beforemounted-------------') }, mounted () { this.$parent.panes.push(this) console.log('----------------tab mounted-------------') }, created () { console.log('----------------tab created-------------') } /*tab-container的打印代码*/ beforeMount () { 
    console.log('!!!!!!!!!!!!!!!!tab container beforemounted!!!!!!!!!!!!!!!!!') }, mounted () { console.log('!!!!!!!!!!!!!tab container mounted!!!!!!!!!!!!!!!!!') }, created () { console.log('!!!!!!!!!!!!!!!!!!!!!tab container created!!!!!!!!!!!!!!!!!!!!!!!') }