生命周期的概念
每个 Vue 实例都有⼀个完整的⽣命周期：
- 开始创建
- 初始化数据
- 编译模版
- 挂载 DOM
- 渲染、更新数据 => 重新渲染
- 卸载
这⼀系列过程我们称之为 Vue 的⽣命周期。
生命周期的流程
- 1.0 创建一个 vue 的实例
Vue的生命周期
- 2.0 初始化事件 & 生命周期
- 在创建 vue 实例时，这个对象其实是空的，到了这一步才慢慢开始执行一些内容
- 3.0 初始化实例中 data 与 method
- 在这一步之前 data 与 method 中其实是没有内容的
- 4.0 判断并且生成虚拟 dom
- 判断实例中是否存在 el 属性：(el：是否指定的渲染的容器)
- 如果存在：
- 继续向下执行
- 如果不存在：
- 当调用 $mount 方法时，继续向下执行
- 判断实例中是否存在 template 属性
- 如果存在：
- 将 template 属性中对应的内容生成为一个虚拟 dom
- 如果不存在：
- 将 中的内容生成为一个虚拟 dom
- 5.0 将虚拟 dom 渲染到页面上
- 6.0 页面会进入挂载完毕的状态等待 data 中数据的改变
- 如果 data 中的数据发生改变：
- 将虚拟 dom 重新渲染，并且更新到页面上，再次进行挂载完毕的状态
- 7.0 销毁 vue 实例
- 注意点：
- el：是否指定的渲染的容器
- el 与 $mount 其实是一样的，都是用来指定页面的渲染容器
- template：
- 如果 vue 实例中不存在，会直接将 中的内容渲染到页面上
- 如果 vue 实例中存在，会直接将 template 属性中的内容渲染到页面上
- 虚拟 dom：
- 相当于将内容渲染到页面上进行的一次 打草稿
- 生命周期的钩子函数
各个生命周期的作用
| 生命周期 | 执行时机 |
|---|---|
| beforeCreate | 在组件实例被创建之初、组件的属性⽣效之前被调用 |
| created | 在组件实例已创建完毕。此时属性也已绑定，但真实DOM还未⽣成，$el 还不可⽤ |
| beforeMount | 在组件挂载开始之前被调⽤。相关的 render 函数⾸次被调⽤ |
| mounted | 在 el 被新建的 vm.$el 替换并挂载到实例上之后被调用 |
| beforeUpdate | 在组件数据更新之前调⽤。发⽣在虚拟 DOM 打补丁之前 |
| update | 在组件数据更新之后被调用 |
| activited | 在组件被激活时调⽤（使用了 <keep-alive> 的情况下） |
| deactivated | 在组件被销毁时调⽤（使用了 <keep-alive> 的情况下） |
| beforeDestory | 在组件销毁前调⽤ |
| destoryed | 在组件销毁后调⽤ |
