本文主要是介绍vue生命周期，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

vue的生命周期是什么呢？

在vue的创建，使用，销毁过程中，会有许多事件，这些事件就被统称为生命周期函数，也叫作生命周期钩子。
一般来说，生命周期包括：

beforeCreat   created  beforeMount  mounted  beforeUpdate  updated
beforeDestory  destoryed

首先，我们可以进行简单的归类：

创建期间生命周期函数：beforeCreat，created，beforeMount，mounted
运行期间生命周期函数：beforeUpdate，updated
销毁期间生命周期函数：beforeDestroy，destroyed

创建阶段：

第一个生命周期函数：beforeCreat，当执行beforeCreat生命周期函数时，vue实例
还没有被完全创建出来，此时data，methods等内部没有初始化，我们这个时候在函数
内调用数据的话，后台会显示undefined。把data选项上的属性放到this上，遍历data
选项，给每个属性添加getter/setter(劫持)

第二个生命周期函数：created，执行这个函数的时候，vue实例已经初始化了，可以在
这里调用数据，不过还没渲染到页面上。 在当前函数中我们可以访问到data中的属性，
此时，会将data中的属性和methods的方法添加到vue的实例身上，同时会将data中所
有的属性添加一个getter/setter方法。如果需要进行前后端上数据交互(ajax请求的
时候) 需要在当前生命周期中使用。找el、找template，得到有效的视图结构，把
template选项编译成render函数（为了生成虚拟DOM作准备）

第三个生命周期函数：beforeMount，这时，调用render方法第一次生成虚拟DOM，vue
已经将模板字符串编译成内存DOM，模板已经编译完成，还没有渲染到页面上。

'ps:什么是虚拟dom？本质上就是一个json数据，用于描述视图结构，保存在视图中
为什么要使用虚拟dom呢？有了虚拟dom，就可以避免我们频繁的操作dom，降低人为的dom
滥用，可以提升web的性能。根据虚拟dom结构，第一次初始化视图结构（生成真实的dom），
这里会产生第一次的touch，toach的结果是依赖收集'

第四个生命周期函数：mounted，创建阶段完成，页面渲染完毕，进入运行阶段。此时
我们可以通过$refs来访问到真实的DOM结构。ref类似与id一样 值必须是唯一的，访问
的时候我们可以使用this.$refs.属性

运行阶段

当数据发生变化，比如触发了点击事件改动数据
beforeUpdate：内存中的数据已经改变，页面上的还没更新根据新的data，render生成新
的虚拟DOM，此时在电脑内存中就有了两个虚拟DOM。patch(newVnode、oldVnode) => diff，
使用diff运算找出新旧虚拟DOM之间的最小差异，通知Watcher来更新它们，视图再次更新完成。
updated：页面上数据和内存中的一致，条件：当路由切换或调用this.$destroy()时

销毁阶段

beforeDestroy：出发这个函数时，还没开始销毁，此时刚刚脱离运行阶段。data，methods，
指令之类的都在正常运行。在这个生命周期函数中我们可以将绑定的事件进行移除。清除缓存，
关闭定时器。拆卸掉当前组件对应的Watcher、解绑当前组件中事件处理器；递归拆卸掉（强制
销毁）所有的子组件。
destroyed：组件销毁完毕，data，methods，指令之类的不可用。

这篇关于vue生命周期的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！