Vue里的生命周期

提示：本文主要对Vue生命周期进行总结

---

前言

提示：这里可以添加本文要记录的大概内容：

我们已经学习了Vue里的自定义指令，在里面我们接触到了钩子函数，本篇文章将对生命周期进行比较详细的讲述

---

提示：以下是本篇文章正文内容

一、引出生命周期

1、引出生命周期

1、什么是Vue的生命周期

		Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、
	初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，
	我们称这是 Vue 的生命周期。

1.1 案例

实现效果：

上来展示“欢迎学习Vue”，随后一点点减小，直到消失不见，随后再切回展示

代码实现：

1.2 定时器放外边（不推荐）

这样会死循环

2、mounted什么时候被调用

3、完成案例

注意：mounted只会被调用一次

4、总结

二、生命周期_挂载流程

1、生命周期图示

2、拆分生命周期

发现div后面的id="#root"没了，是因为这样写，绿色框里会完全替代红色框里的东西

三、生命周期_更新流程

注意：此时数据是新的，但页面是旧的

四、生命周期_销毁流程

此时是vm临死前的展示，只是不能再监测数据了，再去改变数据，也没有用

这里销毁的是自定义事件，原生DOM绑定事件无法删除

五、生命周期_总结

把最早做的案例拿下来，增加需求：
增强一个按钮，停止变换

但是，这样太温柔，即只是把定时器听了下来不切了，
我在其他地方该还是会切换，响应式还在

增加需求：当页面停止变化后，不能再修改透明度
不是停止定时器，而是直接干掉vm

但是此时定时器没有关