从头开始学习Vue的生命周期

先前为了应付面试，每次看vue的生命周期，但都是简单地进行一下了解。只是看一些博主的文章，但是等我真正面试的时候，面试官问起时，我其实回答的并不是很好，因为面试官一眼就能看出你是否真正的理解vue的生命周期，上面面试太糟糕了，深受打击，所以决定把vue的生命周期好好了解下，实际操作下。本人菜鸟，写这些这是让我自己的思路更加清晰，有啥错误，欢迎指出。这是解析的很清楚的博客https://www.cnblogs.com/emma0118/p/6660004.html

创建vue项目

刚开始我是创建了一个文件夹，进行项目引入。（没办法，本人强迫症，必须把步骤一步一步全部写清楚，这里可以跳过），我用的npm进行安装vue,刚开始安装vue-cli,npm install -g vue-cli，安装成功之后，vue的环境就部署成功了，接下来就是使用npm 方式创建项目框架。

步骤：

选择项目所在的位置，通过命令行进入该目录（或者直接在该目录，右键，打开命令行）。
使用脚手架安装项目： vue init webpack demo 项目是基于webpack的
Project name（工程名）:回车
Project description（工程介绍）：回车
Author：作者名
Vue build（是否安装编译器）:回车
Install vue-router（是否安装Vue路由）：回车
Use ESLint to lint your code（是否使用ESLint检查js代码）：n
Set up unit tests（安装单元测试工具）：n
Setup e2e tests with Nightwatch（是否安装端到端测试工具）：n
Should we run npm install for you after the project has been created? (recommended)：回车。
启动项目：

进入项目目录：cd demo
安装项目所需要的依赖：npm install
启动项目：npm run dev

正题

在这里插入图片描述
这里先插入vue的生命周期图（1）

这个算是vue生命周期的详解吧。

看着这些图，每次都感觉自己懵懵懂懂，可能自己的理解能力不行。我是直接拿vue的主封面来进行分析。

beforeCreate()

<script>
export default {
  el: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  beforeCreate () {
    console.log("---------------创建前beforecreate的状态------------")
    console.log("data里面的msg数据：", this.msg)
    console.log("data数据：", this.$data)
    console.log("el：", this.$el)
  }
}
</script>

在这里插入图片描述
说明：data,msg,el都没有值，并且控制台提示没有找到element，说明这时候仅仅只是new Vue(init),只是创建了一个vue实例，但是却什么都还没开始

扫描二维码关注公众号，回复： 9214620 查看本文章

created

在这里插入图片描述
说明：created的状态的时候data里面的数据出来了，但是el并没有。在beforCreate和created中间只是发生了数据注入的过程，先前那些数据都没有拿得到，但是created中就能够拿得到。
所以这副图片中也展示的很清楚，injection(注射)和reactivity(反应)。在这个里面，你能获取data，computed，watch，event回调，methods.并且能ajax异步请求，初始化的一些操作，数据是出来了，但是DOM还没有根据数据渲染。

beforeMount

在这之前的话其实发生了很多事情
在这里插入图片描述

　　a、首先判断实例中是否有el选项，有的话继续向下编译，没有的话会停止编译，直到vm.$mount(el)被调用时才继续（el是挂载的DOM节点）；
　　b、接下来判断实例中是否有template，有的话将其作为模板编译成rander函数；
　　c、没有template的话就将挂载DOM元素的html（即el所对应的DOM元素及其内部的元素）提取出来作为模板编译；
*注：el所对应的DOM元素不能为body/html元素，因为在后面vue实例挂载时，el所对应的DOM元素及其内部的元素会被模板渲染出来的新的DOM所替换。
　　d、如果实例对象中有rander函数，就直接通过它进行渲染操作。

优先级：rander函数 > template > 外部html
此时，rander函数已经准备好并首次被调用。

在这个过程中， $el被初始化为实例中el选项所对应的DOM元素，所以在beforeMount时，用vm.$ el获取到的是挂载DOM元素的html。

template参数选项的有无对生命周期的影响。
（1）.如果vue实例对象中有template参数选项，则将其作为模板编译成render函数。
（2）.如果没有template选项，则将外部HTML作为模板编译。
（3）.可以看到template中的模板优先级要高于outer HTML的优先级。
修改代码如下, 在HTML结构中增加了一串html，在vue对象中增加了template选项：
https://www.jianshu.com/p/69d447321740

这一个步骤就是判断vue的挂载节点是否存在。在这一个步骤我们依然得不到具体的DOM元素，但是vue挂载的根节点已经创建。就相当于在这个阶段你充公的获得了根元素el的信任，他是一个过渡性的。

Mounted

在这里插入图片描述
可以看到此时是给vue实例对象添加$el成员，并且替换掉挂载的DOM元素。因为在之前console中打印的结果可以看到beforeMount之前el上还是undefined

在mounted之前DOM只是显示出来了，但是还有挂在到页面上，还是JavaScript中的虚拟DOM形式存在的。