Vue生命周期详解

一、前言

在使用Vue进行实际开发中，经常在created，mounted等生命周期钩子函数内进行数据，逻辑的处理，但基本都是看别人在哪个生命周期内请求数据，在哪个生命周期内操作DOM，自己也照搬如此使用，是“知其然而不知其所以然的”状态。今儿趁着手头工作忙完这段时间，特别研究了一下生命周期，记录一下自己的学习笔记。

二、生命周期

2.1、生命周期的四个阶段和8个生命周期钩子函数详解

2.1.1、阶段一

包含的生命周期钩子函数：
beforeCreate、created；
beforeCreate、created分析：
beforeCreate：只执行一次，可以在其中加个loading事件，加载实例的时候触发，已经可以拿到this，这个阶段还没有initState，数据还没有代理到this上，没有实现响应式数据，所以在这个阶段不可以请求数据。不常用；
created：只执行一次，组件的props/data/methods都已创建好，都处于可用状态。但是组件的模板结构尚未生成，不能操作dom。可在此阶段调用methods中的方法，请求服务器的数据，并把数据转存到data中，供template模板渲染时使用，非常常用。

2.1.2、阶段二

包含的生命周期钩子函数：
beforeMount、mounted；
beforeMount、mounted分析：
beforeMount：只执行一次，将要把内存中编译好的HTML结构渲染到浏览器中，此时浏览器中还没有当前组件的dom结构，也可以请求服务器的数据，但不常用；
created：只执行一次，已经把内存中的HTML结构成功的渲染到浏览器中，此时浏览器中已经包含当前组件的dom结构，可以操作DOM的最早阶段。也因为此阶段只执行一次，所以无法获取并操作更新后的DOM元素。

2.1.3、阶段三

包含的生命周期钩子函数：
beforeUpdate、updated；
beforeUpdate、updated分析：
beforeUpdate：可执行0次到无数次，每当data中的数据改变时就触发一次，然后将要根据数据变化后、最新的数据重新渲染模板结构。data中的数据是最新的，但是页面内容还没有重新渲染；
updated：可执行0次到无数次，已经完成了根据最新数据从新渲DOM结构。此阶段可在数据变化后操作最新的DOM元素。

2.1.4、阶段四

包含的生命周期钩子函数：
beforeDestroy、destroyed；
beforeDestroy、destroyed分析：
beforeDestroy：只执行一次，组件将被销毁，但未销毁阶段，组件仍在正常工作，很少用；
destroyed：组件已被销毁，浏览器中对应的dom已完全被销毁，很少用。

贴一张官网的图吧：

上述的文字其实就是从这张图里“翻译”出来的，就像官网中写的一句话“下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。”

三、生命周期图中的知识扩展

不知道大家注意到vue实例中的一个属性“el”了吗？因为这个也常常不被注意到，这里也顺便扩展一下：el提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标，只在用 new 创建实例时生效。
简单来说el的作用就是表明我们要将当前vue组件生成的实例插入到页面的哪个元素中，el属性的值可以是css选择器的字符串，或者直接就是对应的元素对象。并且只能在使用new生成实例时才能配置el属性，而我们在组件中只是export一个配置对象，如果设置了el则会报错。

四、说明

参考链接：
Vue官网文档
vue每个生命周期内都可以做什么
简单说说vue中的el属性

欢迎大家一起讨论、学习