Vue中的生命周期

Vue中的生命周期

什么是生命周期呢？

1.当前组件在创建到销毁经历的一系列过程，称之为生命周期

2.生命周期的分为几个阶段？每个阶段有哪些钩子函数？

3.生命周期分为3个阶段，这三个阶段分别是： 初始化 、 运行中 、 销毁

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

• List item

• beforeCreate

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

项目中一般不使用

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

- created

组件创建完成

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

- beforeMount

组件即将挂载

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

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

- mounted

组件挂载结束

使用真实DOM替换VDOM

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

总结： 初始化过程中在项目中使用
1） 数据请求：created
1） DOM操作： mounted
1） 数据修改： beforeMount created mounted

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

内部操作 ： vdom生成和diff的对比
- updated

Rdom已经生成，可以进行异步数据请求得到的dom渲染的第三方库实例化
销毁阶段： 有2个钩子函数
- beforeDestory:
组件即将销毁，准备调用 $destroy() 方法

- destoryed：
组件销毁结束

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

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

组件销毁的两种方式：

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

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

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

名词解释：

钩子函数：
钩子函数就是options配置项中的一个方法，在特定的触发条件（ 时机 ）下会自动触发

除了根实例组件以外，其他的组件中的数据项 data 必须是一个函数，而且这个函数必须返回一个对象

为什么是函数呢？
原因：我们希望组件的数据是独立的，有一定作用域的
为什么返回值是对象？
原因： 是为了符合 数据驱动 原理设计，让observer将data选项中的数据设置 getter 和 setter
代码：

Vue.component( 'Hello',{
    template: '#hello',
    data () { //除了根式
      return {
        num: 920
      }
    },
    //------------------------------------初始化------------------------
    beforeCreate () { 
      /* 
        这个阶段：组件创建前
          data  data选项中的数据获取不到
          RDOM  拿不到
          项目中： 没什么用
          但是这个阶段是一个对事件和生命周期的准备阶段，也是必不可少的
      */
    },
    created () { // 组件创建结束
       /* 
        这个阶段：
          data  data选项中的数据获到了
          RDOM  拿不到
          项目中： 
              数据的修改
              异步数据请求
      */
    },
    beforeMount () { //组件即将挂载
        /* 
        这个阶段：
          data  data选项中的数据获到了
          RDOM  拿不到
          项目中： 
              数据的修改
              异步数据请求
      */
    },
    mounted () { //组件挂载结束了
      /* 
        这个阶段：
          data: 可以获得数据
          RDOM: 拿到了
          项目中： 
              数据修改
              异步数据请求
              真实DOM操作可以了( Vue一般情况下不要直接操作真实DOM, 一般可以进行第三方库的实例化（静态数据渲染来的）  )

     */
    },
    // ------------------------------------运行中---------------------
    beforeUpdate () { //表示组件即将更新   vdom --diff--> vdom的不同（patch对象）
      /* 
        这个阶段： 
          data: 拿到了
          RDOM： 获得
          这个阶段进行的是vdom的生成和diff算法的对比，都是内部进行的，我们在项目中可以不使用
       */
    },
    updated () { // 组件更新结束 ， 通过render函数将vdom渲染成了真实dom,然后驱动vue进行视图更新
      /* 
        这个阶段：
           动态数据的渲染，进行dom操作（ 第三方库的实例化 ）
       */
    },
    // --------------------------------------销毁 -------------
    beforeDestroy () {
    },
    destroyed () {
    }
  })