简述vue生命周期的含义,简述vue生命周期及其用途
本文主要介绍对vue生命周期的深入理解。通过示例代码进行了非常详细的介绍，对于大家的学习或者工作都有一定的参考价值。有需要的朋友下面和边肖一起学习。
目录
一、Vue II的生命周期介绍。钩子详解1。在创建2之前。创造了3。在4号山之前。已安装5。更新6之前。更新7。在摧毁8号之前。摧毁补充$山三。钩子的一些实际用法。异步函数
一.Vue生命周期简介
https://cn.vuejs.org/v2/api/#beforeCreate,官方网站
Vue实例从创建到销毁的过程就是生命周期。详细来说就是创建、初始化数据、编译模板、挂载Dom、渲染更新渲染、卸载等一系列过程。
先来看看官网的生命周期图(我自己做了一点评论):
Vue提供的挂钩就是上图中的红色文字。
二.钩子详解
1.beforeCreate
在实例初始化之后，数据观察器和事件/观察器事件配置在之前被调用。
！声明文档类型
html lang=en
头
meta charset=UTF-8
标题文档/标题
！-介绍vue.js -
脚本类型=text/javascript src=。/vue . js /脚本
/头
身体
div id=应用程序
输入类型=text name= v-model=message
{ {消息}}
/div
脚本类型=文本/javascript
//实例化Vue
var app=新Vue({
埃尔： #app ，
数据：{
消息：“这是毫秒数”
},
//时刻监控数据报文的变化。一旦发生这种变化，该功能将被暂停。
观察：{
//消息必须与被监视的数据同名。
消息：函数(){
Console.log(观察：，消息已更改)
}
},
方法：{
init:函数(){
Console.log(这是初始化方法)
}
},
//我们在beforeCreate钩子中调用Vue的数据和方法
创建之前：函数(){
console.log(beforeCreate ，this . message)；
this . init()；
}
})
/脚本
/body
/html
在上面的例子中，我们在的beforeCreate钩子中调用了Vue的数据和方法，所以我们来看看结果:
可以看出Vue中的数据和方法是不可访问的，是在wath之前执行的。
2.created
实例在创建后被调用。在这一步中，实例已经完成了以下配置：数据观察器、属性和方法的操作以及watch/event事件的回调。但是，挂载阶段还没有开始，$el属性目前是不可见的。
主要应用：调用数据，调用方法，调用异步函数
div id=应用程序
保险商实验所
li v-for=(item，index)of list key= index { { item } }-{ { message } }/Li
/ul
pp1/p
pp1/p
pp1/p
/div
脚本类型=文本/javascript
//实例化Vue
var app=新Vue({
埃尔： #app ，
数据：{
消息：“这是毫秒数”，
列表：[aaaaaaaa ， bbbbbbb ， ccccccc]
},
//时刻监控数据报文的变化。一旦发生这种变化，该功能将被暂停。
观察：{
//消息必须与被监视的数据同名。
消息：函数(){
Console.log(观察：，消息已更改)
}
},
方法：{
foo:function(){
Console.log(foo:，这是初始化方法)
}
},
//创建的挂钩
已创建：函数(){
//调用Vue的数据
console.log(created:，this . message)；
//调用Vue方法
this . foo()；
//因为我们通过v-for循环遍历li，所以创建之前的挂载阶段还没有开始。也不可能弄清楚李的底细。
Console.log(li quantity:，document . getelementsbytagname( Li )。长度)；
//可以直接获取直接加载的DOM。
Console.log(p编号：，document.getelementsbyname (p )。长度)；
},
})
/脚本
结果:
可以看到，创建的hook可以获取Vue的数据，调用Vue方法，获取直接从原HTML加载的DOM，但无法获取挂载模板生成的DOM(比如v-for循环通过Vue.list生成li)
3.beforeMount
在挂载开始之前调用：第一次调用相关的渲染函数(模板)。
比如v-for生成的html还没有挂载到页面上。
(后跟2个创建的代码)
beforeMount:函数(){
console.log(beforeMount:，document . getelementsbytagname( Li )。长度)；
},
装载前的结果：1
4.mounted
El被新创建的vm替换。$el，钩子在装入实例后被调用。
有初始值的DOM渲染，例如我们的初始数据list,渲染出来的li，只有这里才能获取
(后跟2个创建的代码)
已安装：函数(){
console.log(mounted:，document . getelementsbytagname( Li )。长度)；
},
结果已安装：3
我们可以看到它安装在这里的实例上，我们可以得到李的编号。
5.beforeUpdate
当数据更新时调用，这发生在重新呈现和修补虚拟DOM之前。您可以进一步更改此挂钩中的状态，这将不会触发额外的重新渲染。
当我们更改Vue的任何数据时，都会触发该功能。
更新之前：函数(){
Console.log(在Update挂钩执行之前.);
console . log( before update: this . message)
},
6.updated
由于数据变化，虚拟DOM被重新渲染和修补，之后钩子将被调用。
当这个钩子被调用时，组件DOM已经被更新，所以现在可以执行依赖于DOM的操作了。但是，在大多数情况下，您应该避免在此期间更改状态，因为这可能导致更新的无限循环。
在服务器端呈现期间不调用此挂钩。
数据更新时会触发(vue的所有数据只有更新时才会触发)。如果想一次统一处理数据，可以用这个。如果想对不同的数据更新进行不同的处理，可以使用nextTick或watch进行监控。
已更新：函数(){
Console.log(更新的挂钩执行.);
console.log(已更新：，this.message)
},
7.beforeDestroy
在实例被销毁之前调用。在这一步，实例仍然完全可用。
8.destroyed
在销毁Vue实例后调用。调用后，Vue实例指示的所有内容都将被解除绑定，所有事件侦听器都将被移除，所有子实例都将被销毁。在服务器端呈现期间不调用此挂钩。
div id=应用程序
/div
脚本类型=文本/javascript
//实例化Vue
var app=新Vue({
埃尔： #app ，
数据：{
消息：“这是毫秒数”，
},
销毁前：函数(){
Console.log(在Destroy挂钩执行之前.this.message)
},
已销毁：函数(){
Console.log(已销毁的挂钩执行.this.message)
}
})
//销毁Vue实例，触发beforeDestroy和destroyed函数。
app。$destroy()
/脚本
结果：
可以看出，这两个函数在Vue实例被销毁时都会被调用。
补充$mount
当你的vue不挂在el的时候我们可以用$mount。
var app=新Vue({
数据：{
消息：“这是毫秒数”，
},
}).$ mount(“# app”)
三.钩子的一些实战用法
1.异步函数
这里我们使用定时器作为异步函数。
div id=应用程序
保险商实验所
li v-for=(item，index)of list key= index { { item } }/Li
/ul
/div
脚本类型=文本/javascript
var app=新Vue({
埃尔： #app ，
数据：{
列表：[aaaaaaaa ， bbbbbbb ， ccccccc]
},
已创建：函数(){
Consoloe.log(创建的异步：aaaaa )；
//异步获取数据
//因为是异步的，就像我们用ajax获取数据一样。
setTimeout(()={
this.list=[111 ， 222 ， 333 ， 444]，
Console.log(创建的异步：，document.getelementsbyname (li )。长度)；
},0)
},
已安装：函数(){
console.log(mounted:，document . getelementsbytagname( Li )。长度)；
},
已更新：函数(){
console.log(updated:，document . getelementsbytagname( Li )。长度)
},
})
/脚本
结果为：
创建：aaaaaaaa
已安装：3
创建的异步函数：3
更新日期：4
解释：
可以看到异步函数被添加到created的钩子中，所以函数的执行顺序是：
Ced hook，mounted hook，异步函数，updated hook(根据事件队列原理，只有更新后，li才是真实的，DOM渲染为4，所以异步函数中获取的li数就是没有变化的li数)。
Mounted获取的是Vue的数据中设置初始值渲染的DOM，而我们是异步函数中变化的列表数据，所以mounted获取的li数是3。
只要data vue绑定的数据发生变化就触发update函数，所以最后执行，也就是4。
这是否意味着可以直接在更新功能中操作？其实并没有，因为更新功能针对的是vue所有数据的变化，我们也可能会有其他数据的变化。
例如，下面的例子：
//我们用异步函数修改了两次列表，发现更新被触发了两次。
已创建：函数(){
//异步获取数据
//因为是异步的，就像我们用ajax获取数据一样。
setTimeout(()={
this.list=[111 ， 222 ， 333 ， 444]，
Console.log(创建的异步：，document.getelementsbyname (li )。长度)；
},0)
setTimeout(()={
This.list=[快乐大本营，脚踏实地， 300033 ，天天向上，好好学习]，
Console.log(创建的异步：，document.getelementsbyname (li )。长度)；
},1000)
},
已安装：函数(){
console.log(mounted:，document . getelementsbytagname( Li )。长度)；
},
已更新：函数(){
console.log(updated:，document . getelementsbytagname( Li )。长度)
},
结果为：
2.Vue.nextTick对异步函数的结果进行操作
当我们想要改变数据时，我们每个人都触发自己的方法。
已创建：函数(){
//异步获取数据
//因为是异步的，就像我们用ajax获取数据一样。
//为了在数据改变后等待Vue完成更新DOM，可以在数据改变后立即使用Vue.nextTick(callback)。这样，回调函数将在DOM更新完成后被调用。
setTimeout(()={
this.list=[111 ， 222 ， 333 ， 444]，
Console.log(创建的异步：，document.getelementsbyname (li )。长度)；
这个。$nextTick(function(){
console.log(created$nextTick:，document . getelementsbytagname( Li )。长度)
});
},0)
setTimeout(()={
This.list=[快乐大本营，脚踏实地， 300033 ，天天向上，好好学习]，
Console.log(创建的异步：，document.getelementsbyname (li )。长度)；
这个。$nextTick(function(){
console.log(created$nextTick:，document . getelementsbytagname( Li )。长度)
});
},1000)
},
已安装：函数(){
console.log(mounted:，document . getelementsbytagname( Li )。长度)；
},
已更新：函数(){
console.log(updated:，document . getelementsbytagname( Li )。长度)
},
结果：
我们可以看到，通过$nextTick，我们可以对异步函数的结果进行操作。
关于对vue生命周期的深入了解，本文到此结束。更多关于理解vue生命周期的信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。