[笔记]Vue生命周期（钩子函数）

vue官方文档API — Vue.js

钩子函数

初始化阶段：有4个钩子函数，触发条件是自动的

1） 数据请求：created
2） DOM操作： mounted
3） 数据修改： beforeMount created mounted

1. beforeCreate
创建Vue实例化之前所调用的函数

这个阶段：

  data 选项中的数据获取不到

  RDOM 拿不到

1. 组件即将创建，进行组件事件和生命周期的初始化

2. 项目中一般不使用（但是这个阶段是对事件和生命周期的准备阶段，是必不可少的）

3. 有的开发者也会在这里进行数据请求

2. created
实例创建完成，此时可以访问实例中的data的属性和methods中的方法，但不能操作dom。因为页面还未加载成功，页面未显示。

1、这个阶段：

   data选项中的数据获到了

   RDOM 拿不到

2、项目中：
1） 异步请求接口数据
2） 数据修改

3. beforeMount
渲染dom之前，加载组件第一次渲染 

1、组件即将挂载

2、判断根实例组件是否有el选项，如果没有，那么手动挂载，判断根实例组件中的其他子组件是否有template选项，如果没有，那么使用outerHTML插入

3、这个阶段：

    1） data data选项中的数据获到了

    2）RDOM 拿不到

3、项目中：
   1） 异步请求接口数据
   2） 数据修改

 4. mounted
组件模板已经渲染到指定的el，页面显示，可以操作dom

这个阶段：

data: 可以获得数据

RDOM: 拿到了

1. 组件挂载结束

2. 使用真实DOM替换VDOM

3. 项目中
   1） 异步请求接口数据
   2） 数据修改
   3） 真实DOM操作可以了( Vue一般情况下不要直接操作真实DOM, 一般可以进行第三方库的实例化（静态数据渲染来的） )

运行中阶段：有2个钩子函数 ： 触发条件是： 当data选项中的数据发生改变时

 5. beforeUpdate
数据更新时执调用

这个阶段：

data: 拿到了

RDOM： 获得 这个阶段进行的是vdom的生成和diff算法的对比，都是内部进行的，我们在项目中可以不使用

 6 .updated
组件更新完成
注意：关于update的钩子函数，都是页面动态渲染有关，每当数据变化时页面更新，都会触发这些钩子，这些钩子的触发频率很高。

 组件更新结束 ， 通过render函数将vdom渲染成了真实dom,然后驱动vue进行视图更新， 

这个阶段：

动态数据的渲染，

Rdom已经生成，可以进行dom操作（ 第三方库的实例化 ），异步数据请求得到的dom渲染的第三方库实例化

销毁阶段： 有2个钩子函数 

这两个钩子函数没有什么去别，功能很相似

项目中：
这两个钩子函数都可以用来做善后,把一些计时器，第三方库实例化出来的实例

组件销毁的两种方式：

使用$destroy()方法（内部销毁）
缺点： 会将组件的模板也保留下来

使用开关销毁（外部销毁）
v-if
这种类型的销毁不会留有模板

有一个钩子函数可以不写，这个钩子函数就是 render 函数

7. beforeDestroy
组件将要销毁，准备调用 $destroy() 方法
8. destroyed
组件销毁完成。常在该时机移除耗时操作

不常用的钩子函数：

9. activited  keep-alive 专属，组件被激活时调用，

10. deactivated  keep-alive 专属，组件被销毁时调用，

11. errorcaptured 捕捉子组件错误时调用