vue生命周期详解简书,请详细说下你对vue生命周期的理解
本文主要介绍了vue的生命周期，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。
目录
为什么要了解生命周期？什么是生命周期钩子函数？创建和安装的钩子1的一些实际应用。异步函数
2.Vue.nextTick对异步函数的结果进行操作
摘要
为什么要理解生命周期
有了Vue框架，熟悉它的生命周期可以让开发更好。
如果只是简单的了解vue中的简单语法，就可以实现一些相应的项目和相应的思路。但如果出现问题，就需要借助生命周期来寻找。即使有一些需求，你也可以通过生命周期来决定我们应该把这个东西写在哪里。所以有必要了解vue的生命周期。
什么是生命周期
Vue实例从创建到销毁的过程就是生命周期。详细来说就是创建、初始化数据、编译模板、挂载Dom、渲染更新渲染、卸载等一系列过程。
另外，Vue的实例，也就是Vue框架的入口，可以理解为前端的ViewModel。它包含了页面中的业务逻辑处理和数据模型等。它还有自己的一系列生命周期函数钩子，帮助我们对整个Vue实例的生成、编译、挂起、销毁过程进行js控制。
官网给出的生命周期图(翻译成中文)如下：
生命周期钩子函数
生命周期挂钩只是生命周期事件的另一个名称。生命周期钩子=生命周期函数=生命周期事件。
主要的生命周期函数分类：
生命周期功能创建于：
Before:实例刚刚在内存中创建，此时，data和methods属性还没有初始化。
Created:实例已经在内存中创建了OK，此时数据和方法已经创建了OK，但是模板还没有编译。
BeforeMount:此时模板已经编译好了，但是还没有挂载到页面上。
Mounted:此时，编译后的模板已经被装载到页面上指定的容器中进行显示。
运行期间的生命周期功能：
Before:此函数在更新状态更新之前执行。此时数据中的状态值是最新的，但是界面上显示的数据还是旧的，因为DOM节点还没有重新渲染。
Updated:在实例更新后调用这个函数。此时data中的状态值和界面上显示的数据已经更新，界面已经重新渲染！
销毁期间的生命周期功能：
BeforeDestroy:在实例销毁之前调用。在这一步，实例仍然完全可用。
销毁：在Vue的实例被销毁后调用。调用后，Vue实例指示的所有内容都将被解除绑定，所有事件侦听器都将被移除，所有子实例都将被销毁。
created和mounted
在生命周期的钩子函数中，最常用的是创建和挂载。
Created:在模板渲染成html之前调用，也就是通常会初始化一些属性值，然后渲染成视图。主要应用：调用数据，调用方法，调用异步函数。
Mounted:在模板被渲染成html之后调用，通常是在页面初始化之后，然后在html的dom节点上执行一些必要的操作。
创建时，视图中的html是不渲染的，所以如果此时直接操作html的dom节点，是找不到相关元素的。
在mounted中，由于此时已经呈现了html，所以可以直接操作dom节点，
其实两者很好理解。通常，created是多次使用的，而mounted通常是在一些插件或组件的使用中操作的，比如插件chart . js:var CTX=document . getelementbyid(ID)的使用；通常会有这一步，如果你把它写成一个组件，你会发现你不能在created中对chart做一些初始化配置。你必须等待这个html被渲染后才能做，所以mounted是最好的选择。
钩子的一些实战用法
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，我们可以对异步函数的结果进行操作。
总结
本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。