标签：虚拟 生命周期 dom DOM 周期函数 vue data

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，指令之类的不可用。

标签：虚拟,生命周期,dom,DOM,周期函数,vue,data
来源： https://www.cnblogs.com/xrzswney/p/16255415.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。