生命周期（Vue2）

生命周期：

又名：生命周期回调函数、生命周期函数、生命周期钩子
是什么：Vue在关键时候自动调用的一些特殊名称的函数
生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的
生命周期函数中this指向是vm 或组件实例对象

Vue 从创建开始，然后经历初始化事件，开始数据代理，解析模板，挂载DOM，渲染，更新（跳回去渲染），销毁。整理生命周期会有几个钩子，方便在适当时时机做一些操作。

1、Init Events & Lifecycle

初始化生命周期、事件，但数据代理还未开始

2、beforeCreate

无法通过vm访问到data中的数据、methods中的方法

3、Init injecttions & reactivity

初始化：数据监测、数据代理

4、Created

此时可以通过vm访问到data中的数据、methods中的方法

5、判断是否传入el

此阶段Vue开始解析模板，生成虚拟dom（内存中），页面还不能显示解析好的内容

如果传入el

判断是否传入template

如果传入template

将传入的div标签作为模板，并且会替代传入的el模板

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h1>{{num}}</h1>
  </div>
</body>
<script>
  new Vue({
    el: '#app',
    template:`
      <div id='root'>
        <h1>{{num}}</h1>
      </div>
    `,
    data() {
      return {
        num:1
      }
    },
  })
</script>
</html>

如果没有传入template

默认将传入的el当作模板

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h1>{{num}}</h1>
  </div>
</body>
<script>
  new Vue({
    el: '#app',
  })
</script>
</html>

如果没有传入el

没有传入el模板时，不会解析模板，并且不会继续执行挂载流程

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h1>{{num}}</h1>
    <button @click="num++">点击num+1</button>
  </div>
</body>
<script>
  new Vue({
    // el: '#app',
    data() {
      return {
        num: 1
      }
    },
    beforeCreate() {
      console.log('beforeCreate', this);
    },
    created() {
      console.log('created', this);
    },
    beforeMount() {
      console.log('beforeMount', this);
    },
    mounted() {
      console.log('mounted', this);
    },
  })
</script>
</html>

此时如果调用**vm.$mount(‘xxx’)**传入需要解析的模板，会继续执行挂载流程

6、beforeMount

页面呈现的时未经Vue编译的dom结构
所有对dom的操作，最终都不奏效

7、Create vm.$el and replace “el” with it

将内存中的虚拟dom 转为真实dom插入页面并创建$el字段保存真实dom

8、mounted

此时：
- 页面中呈现的是经给Vue编译的dom
- 对dom的操作均有效（尽可能避免操作dom）
至此初始化过程结束，一般在此进行：开启定时器、发送网络请求、订阅消息、绑定自定义事件、等初始化操作

9、更新流程

9.1、beforeUpdate

此时：数据是新的，但页面是旧的，即：页面尚未和数据保存同步

9.2、Virtual Dom re-render and patch

根据新数据，生成新的虚拟dom（内存中），随后与旧的虚拟dom（内存中）进行比较，最终完成页面更新，即：完成了Modal --> View的更新

9.3、updated

此时：数据是新的，页面也是最新的。即：页面和数据保持同步

10、销毁流程

当vm上的$destroy被调用的时候，开始走销毁流程
beforeDestroy

此时：vm中所有的：data、methods、指令等等，等处于可用状态，马上要执行销毁流程

一般在此阶段：关闭定时器、取消订阅消息、解绑自定义事件等收尾工作

此阶段会更新数据，但是不会更新页面
Teardown watchers,child components and event listeners

移除所有的监听，子组件和事件监听器
destroyed

所有的事件监听器，子实例都会被销毁。该钩子在服务器端渲染期间不被调用。