vue2生命周期钩子函数有哪些,vue生命周期总共有几个阶段?分别对应的钩子函数是?
本文主要介绍了关于Vue的生命周期和钩子函数的信息，对大家学习或使用vue2有一定的参考价值。让我们和边肖一起来看看吧。
目录
VUE生命周期和挂钩功能介绍
VUE生命周期挂钩
Vue生命周期简介
并创建挂载。
更新相关
销毁相关
摘要
Vue生命周期介绍和钩子函数
组件的内部结构在每个阶段都是不同的，所以一般来说，特定的钩子可以做特定的事情，比如Ajax在挂载阶段获取数据。从创建VUE实例到最终销毁的整个过程称为vue的生命周期。在这个生命周期中，会发生以下事情：从创建vue实例开始，首先是创建Vue实例，然后是数据初始化、模板编译、挂载dom、渲染dom、更新对象属性、渲染dom、解绑定、销毁。
VUE生命周期钩子
生命周期钩子也叫生命周期时间，生命周期函数，生命周期钩子就是vue生命周期中的各种事件。这些事件被称为生命周期挂钩。在vue的生命周期中，大多分为创建、挂起、更新、销毁四个阶段。这四个阶段分别对应两个生命周期挂钩。
一、创建部分(create)，表示vue实例已初始化。简单来说，我们在代码var app=new vue()中做了这个操作，然后进入了vue生命周期的创建阶段。在创建阶段，会有两个可编程接口提供给我们，即beforeCreate和created。这两个接口都是在创建阶段触发的，但是这两个接口是不同的。beforeCreate在创建之前触发，即在初始化vue实例之后，在读取数据之前触发。如果此时读取数据中的数据，会提示未归档。创建实例后调用Created。此时data中的数据已经写入，但是dom还没有挂载，所以还没有和页面关联。现在，进入安装阶段。
二、挂载阶段(mount)，这个阶段是将页面中的dom挂载到实例化的vue对象上。简单来说，el: #dom 被执行了。这个阶段还有两个接口供我们编程，分别是beforemount和mounted。这两个接口的主要区别在于dom是否挂载在实例对象上。在挂载之前触发beforemount，只解析模板。如果此时输出的是要挂载的dom的innerHTML，则原样输出模板，不渲染数据。Mounted是装载dom后可以呈现数据中的数据的页面。这个阶段之后是更新阶段。
010-5900此阶段是指首次加载后页面上的数据再次更新。对应同样的两个接口，beforeupdate和update。两个接口的区别主要在于页面dom是否渲染。我们修改数据中的数据，修改完成后触发beforeupdate。此时，数据中的属性值处于修改状态，但是页面的dom没有渲染。更新是将数据呈现到页面上。至此，vue的生命周期已经到了更新阶段。在正常使用中，我们会多次处于更新阶段，对页面的数据进行各种修改。但是，为了关闭不必要的事件和释放内存，需要销毁阶段。
第四，销毁阶段(destroyed)，一个实列被销毁后，实例绑定的所有事件都将失效，监听器将被移除。这个阶段对应于两个接口，销毁前和销毁。DeforeDestory在需要销毁实例之前调用，但尚未首先返回。此时，实例绑定的各种事件和侦听器仍然可用。销毁实例后调用Destroy。此时，实例中的所有东西都不能使用，但是页面上的数据仍然保留着页面最后渲染的数据。
Vue生命周期简介
上面描述的阶段
使用代码观察钩子函数
！声明文档类型
超文本标记语言
头
标题/标题
脚本类型= text/JavaScript src= https://cdn。jsdelivr。net/vue/2。1 .3/vue。js /脚本
/头
身体
div id=应用程序
p{{ message }}/p
/div
脚本类型=文本/javascript
var应用=新Vue({
埃尔： #app ，
数据：{
信息："肖旭是男孩"
},
创建之前：函数(){
console.group(创建前创建前状态===============》);
console.log(%c%s ， color:red ， el : this .$ El)；//未定义
console.log(%c%s ， color:red ， data : this .$ data)；//未定义
console.log(%c%s ， color:red ， message: this.message)
},
已创建：函数(){
console.group(已创建创建完毕状态===============》);
console.log(%c%s ， color:red ， el : this .$ El)；//未定义
console.log(%c%s ， color:red ， data : this .$ data)；//已被初始化
console.log(%c%s ， color:red ， message: this.message ).//已被初始化
},
安装前：函数(){
console.group(在装载之前挂载前状态===============》);
console.log(%c%s ， color:red ， el : (this .$ El))；//已被初始化
console.log(这个$ El)；
console.log(%c%s ， color:red ， data : this .$ data)；//已被初始化
console.log(%c%s ， color:red ， message: this.message ).//已被初始化
},
已安装：函数(){
控制台。组(已安装挂载结束状态===============》);
console.log(%c%s ， color:red ， el : this .$ El)；//已被初始化
console.log(这个$ El)；
console.log(%c%s ， color:red ， data : this .$ data)；//已被初始化
console.log(%c%s ， color:red ， message: this.message ).//已被初始化
},
更新之前：函数(){
console.group(更新前更新前状态===============》);
console.log(%c%s ， color:red ， el : this .$ El)；
console.log(这个$ El)；
console.log(%c%s ， color:red ， data : this .$ data)；
console.log(%c%s ， color:red ， message: this.message ).
},
已更新：函数(){
console.group(已更新更新完成状态===============》);
console.log(%c%s ， color:red ， el : this .$ El)；
console.log(这个$ El)；
console.log(%c%s ， color:red ， data : this .$ data)；
console.log(%c%s ， color:red ， message: this.message ).
},
销毁前：函数(){
console.group(销毁前销毁前状态===============》);
console.log(%c%s ， color:red ， el : this .$ El)；
console.log(这个$ El)；
console.log(%c%s ， color:red ， data : this .$ data)；
console.log(%c%s ， color:red ， message: this.message ).
},
已销毁：函数(){
console.group(已销毁销毁完成状态===============》);
console.log(%c%s ， color:red ， el : this .$ El)；
console.log(这个$ El)；
console.log(%c%s ， color:red ， data : this .$ data)；
console.log(%c%s ， color:red ， message: this.message)
}
})
/脚本
/body
/html
create 和 mounted 相关
创建前：el和数据并未初始化
创建时间：完成了数据数据的初始化，el没有
安装前：完成了埃尔和数据初始化
已安装：完成挂载
另外在标红处，我们能发现埃尔还是{{message}}，这里就是应用的虚拟DOM(虚拟Dom)技术，先把坑占住了。到后面安装好的挂载的时候再把值渲染进去。
update 相关
destroy 相关
关于毁灭，现在还不清楚。我们在控制台中执行命令来销毁vue实例。销毁后，我们会再次更改message的值，vue将不再响应此动作。但是最初生成的dom元素仍然存在，所以可以理解为执行销毁操作后，不再受vue控制。
总结
之前：比如你可以在这里添加一个加载事件。
已创建：在这里完成加载，做一些初始化，实现函数自执行。
Mounted:在这里发起一个后端请求，取回数据，用路由钩子做一些事情。
BeforeDestory:您确定要删除XX吗？已销毁：当前组件已被删除。清空相关内容。
本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。