vue生命周期钩子函数有哪些

每个vue实例从创建到销毁的过程就是vue的一个生命周期，每个阶段都有对应的钩子函数，当我们想在vue的不同时期操作vue实例是，就可以在不同的钩子函数中进行

vue有8种生命周期函数：

beforeCreate(实例创建前)

这个时候this还不能使用，data中的数据、methods中的方法，以及watcher中的事件都不能获得。

var vm = new Vue({el: '#app',data: {message: '今天是周一！！！'},beforeCreate(){console.group('beforeCreate 创建前状态==========>>');console.log("%c%s", "color:red", "el     : "+this.$el);   //undefinedconsole.log("%c%s", "color:red", "data   : "+this.$data); //undefinedconsole.log("%c%s", "color:red", "message: "+this.message);   //undefined},

created(实例创建后)

这个时候可以操作vue中的数据和方法，但是还不能对dom节点进行操作。

//...created(){console.group('created 创建完毕状态==========>>');console.log("%c%s", "color:red", "el     : "+this.$el);   //undefinedconsole.log("%c%s", "color:red", "data   : "+this.$data); //[object Object]console.log("%c%s", "color:red", "message: "+this.message);   //今天是周一！！！},
//...

beforeMoute(元素挂载前)

$el属性已存在，是虚拟dom，只是数据未挂载到模板中。

//...beforeMount(){console.group('beforeMount 挂载前状态==========>>');console.log("%c%s", "color:red", "el     : "+this.$el);   //[object HTMLDivElement]console.log(this.$el);console.log("%c%s", "color:red", "data   : "+this.$data); //[object Object]console.log("%c%s", "color:red", "message: "+this.message);   //今天是周一！！！},
//...

mouted(元素挂载后)

数据和dom都完成挂载，在上一个周期占位的数据把值渲染进去，一般请求会放在这个地方，因为这边请求改变数据之后刚好能渲染
注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick替换掉 mounted

//...mounted(){console.group('mounted 挂载结束状态==========>>');console.log("%c%s", "color:red", "el     : "+this.$el);   //[object HTMLDivElement]console.log(this.$el);  console.log("%c%s", "color:red", "data   : "+this.$data); //[object Object]console.log("%c%s", "color:red", "message: "+this.message);   //今天是周一！！！},
//...

beforeUpdate(实例更新前)

点击页面中的元素执行相应的事件，并触发beforeUpdate和updated钩子函数只要是页面数据改变了都会触发，数据更新之前，页面数据还是原来的数据，当你请求赋值一个数据的时候就会执行这个周期，如果没有数据改变不执行。

//...beforeUpdate(){console.group('beforeUpdate 更新前状态==========>>');console.log("%c%s", "color:red", "el     : "+this.$el);   //[object HTMLDivElement]console.log(this.$el);console.log(this.$el.innerHTML);    //<p>今天是周一！！！</p>console.log("%c%s", "color:red", "data   : "+this.$data); //[object Object]console.log("%c%s", "color:red", "message: "+this.message);   //今天周二了！！！},
//...

updated(实例更新后)

只要是页面数据改变了都会触发，数据更新完毕，页面的数据是更新完成的，beforeUpdated和updated要谨慎使用，因为页面更新数据的时候都会触发，在这里操作数据很影响性能和死循环。
注意 updated 不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以用 vm.$nextTick替换掉 updated：

//...updated(){console.group('updated 更新完成状态==========>>');console.log("%c%s", "color:red", "el     : "+this.$el);   //[object HTMLDivElement]console.log(this.$el);console.log(this.$el.innerHTML);    //<p>今天周二了！！！</p>console.log("%c%s", "color:red", "data   : "+this.$data); //[object Object]console.log("%c%s", "color:red", "message: "+this.message);   //今天周二了！！！},
//...

beforeDestory(实例销毁前)

实例销毁之前调用，在这一步，实例仍然完全可用。
注意：细心的小伙伴会发现beforeUpdate和updated钩子函数中的e l 一样，根据官方理解 beforeUpdate应该指向虚拟dom ，所以才会一样，而dom中的真正内容不一样，
但是beforeMount和mouted钩子函数中为什么又会有区别呢？
感觉是设计的不足之处。执行vm.destroy()函数触发beforeDestroy和destoryed钩子函数

//...beforeDestroy(){console.group('beforeDestroy 销毁前状态==========>>');console.log("%c%s", "color:red", "el     : "+this.$el);   //[object HTMLDivElement]console.log(this.$el);console.log("%c%s", "color:red", "data   : "+this.$data); //[object Object]console.log("%c%s", "color:red", "message: "+this.message);   //今天周二了！！！},
//...

destory(实例销毁后)

vue实例销毁后调用，调用后，Vue实例指示的所有内容都会解除绑定，所有的事件监听器都会被移除，所有的子实例也会被销毁。
执行destroy方法后，对data的改变不会再触发周期函数，此时的vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。

//...destroyed(){console.group('destroyed 销毁完成状态==========>>');console.log("%c%s", "color:red", "el     : "+this.$el);   //[object HTMLDivElement]console.log(this.$el);console.log("%c%s", "color:red", "data   : "+this.$data); //[object Object]console.log("%c%s", "color:red", "message: "+this.message);   //今天周二了！！！},
//...

总结：

beforecreate：可以在这加个loading事件
created ：在这结束loading，还做一些初始化，实现函数自执行
mounted ：在这发起后端请求，拿回数据，配合路由钩子做一些事情
beforeDestory：你确认删除vue实例了吗？
destoryed ：当前实例已被销毁，解绑相关指令和事件监听器

重点：

父子组件嵌套时触发钩子函数顺序
1.组件挂载阶段

父组件beforeCreate=>>父组件created=>>父组件beforeMount=>>子组件beforeCreate=>>子组件created=>>子组件beforeMount=>>子组件mounted=>>父组件mounted
即从创建到挂载，是从外到内，再从内到外

2.组件更新阶段

父组件beforeUpdate=>>父组件updated

3.组件销毁阶段

父组件beforeDestroy=>>子组件beforeDestroy=>>子组件destroyed父组件destroyed
即销毁是从外到内，再从内到外

以下为简单粗暴的答案直接走起：
答：总共分为8个阶段。创建前/后，载入前/后，更新前/后，销毁前/后。

创建前/后：在beforeCreated阶段，vue实例的挂载元素$el和数据对象 data 都为undefined，还未初始化。在 created阶段，vue实例的数据对象data有了，$el还没有。

载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。

更新前/后：当data变化时，会触发beforeUpdate和updated方法。

销毁前/后：在destroy阶段，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。destroyed阶段，组件销毁

vue生命周期钩子函数有哪些相关推荐

vue生命周期钩子函数的正确使用方式
对于vue生命周期我们还是要先了解清楚,因为不同的生命期用不同的钩子函数,先上图: 遇到的一个问题在我的项目中,常用的生命周期钩子函数一直都是mounted,对于大部分情况,都是屡试不爽.捷报频传~ ...
Vue生命周期钩子函数理解与使用场景
Vue生命周期钩子函数每个 Vue 实例在被创建时都要经过一系列的初始化过程--例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫 ...
Vue生命周期钩子函数的使用以及应用场景
文章目录前言钩子函数介绍 beforeCreate(创建前) created(创建后) beforeMounted(挂载前) mounted(挂载后) beforeUpdate(更新前) upda ...
vue生命周期钩子函数
vue实例的生命周期:从创建到销毁的整个过程 1.钩子函数 vue框架内置函数,随着组件的生命周期阶段,自动执行使用钩子函数可以知道vue生命周期到达了什么阶段作用:在特定的时间点执行特定的操作 ...
史上最全的Vue生命周期钩子函数11个
什么是生命周期? 生命周期: Vue是一个构造函数,当执行执行这个函数时,相当于初始化vue实例: 在创建实例过程中,需要设置数据监听,编译模板,将实例挂载到DOM上,数据更新能够让DOM也更新,在这 ...
说一下vue生命周期钩子函数有哪些，分别什么时候触发
vue生命周期即为一个组件从出生到死亡的一个完整周期,主要包括以下4个阶段:创建,挂载,更新,销毁创建前:beforeCreate, 创建后:created 挂载前:beforeMount, 挂 ...
Vue08/Vue 生命周期钩子函数( Vue生命周期11个阶段 )应用场景
Vue生命周期 Vue生命周期介绍 Vue生命周期是指Vue实列对象从创建之初到销毁的过程一. Vue生命周期11个阶段创建 beforeCreate //数据初始化前 created ...
vue生命周期钩子函数（11个）
首先来一波官网的对于vue生命周期的图解. 这一张图对于vue的生命周期已经讲解的特别详细了,但是光靠这一张图还不足于了解它的生命周期,我们需要实践一下,介绍一下vue的钩子函数. 一. 组件创建前后 ...
vue生命周期钩子函数为什么不能使用箭头函数
来自vue官方文档的解释: 所有生命周期钩子的 this 上下文将自动绑定至实例中,因此你可以访问 data.computed 和 methods.这意味着你不应该使用箭头函数来定义一个生命周期方法 ...

vue生命周期钩子函数有哪些

vue生命周期钩子函数有哪些相关推荐

最新文章

热门文章