vue的生命周期

Vue生命周期详解

最新推荐文章于 2022-09-29 15:44:25 发布

原创最新推荐文章于 2022-09-29 15:44:25 发布 · 202 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #生命周期

什么是生命周期？
当前组件在创建到销毁经历的一系列过程，称之为生命周期
生命周期的分为几个阶段？每个阶段有哪些钩子函数
- 生命周期分为3个阶段，这三个阶段分别是： 初始化、运行中、销毁
  - 初始化阶段：有4个钩子函数，触发条件是自动的
    1. beforeCreate
      1. 组件即将创建，进行组件事件和生命周期的初始化
      2. 可以在这里进行数据请求，个人不推荐
    2. created
      1. 组件创建完成
      2. 项目中：
        1）异步请求接口数据
        2）数据修改
    3. beforeMount
      1. 组件即将挂载
      2. 判断根实例组件是否有el选项，如果没有，那么手动挂载，判断根实例组件中的其他子组件是否有template选项，如果没有，那么使用outerHTML插入
      3. 项目中：
        1）异步请求接口数据
        2）数据修改
    4. mounted
      1. 组件挂载结束
      2. 使用真实DOM替换VDOM
      3. 项目中
        1）异步请求接口数据
        2）数据修改
        3）真实DOM操作可以了( Vue一般情况下不要直接操作真实DOM, 一般可以进行第三方库的实例化（静态数据渲染来的） )
    5. 总结：初始化过程中在项目中使用
      数据请求：created
      DOM操作： mounted
      数据修改： beforeMount created mounted
  - 运行中阶段：有2个钩子函数：触发条件是：当data选项中的数据发生改变时
    1. beforeUpdate：
      内部操作： vdom生成和diff的对比
      我们可以不使用
    2. updated
      Rdom已经生成，可以进行异步数据请求得到的dom渲染的第三方库实例化
  - 销毁阶段： 有2个钩子函数
    1. beforeDestory: 组件即将销毁，准备调用 $destroy() 方法
    2. destoryed：组件销毁结束
      这两个钩子函数没有什么区别，功能相似
      项目中：
      这两个钩子函数都可以用来做善后,把一些计时器，第三方库实例化出来的实例
    3. 组件销毁的两种方式：
      1. 使用$destroy()方法（内部销毁）
        缺点：会将组件的模板也保留下来
      2. 使用开关销毁（外部销毁）
        v-if
        这种类型的销毁不会留有模板
  有一个钩子函数可以不写，这个钩子函数就是我们 render 函数

分隔符——————————————————————————————

项目中如何使用？

//初始化阶段_________________________________________
beforeCreate () { 
   /* 
     这个阶段：组件创建前
       data  data选项中的数据获取不到
       RDOM  真实dom拿不到
       项目中： 没什么用
       但是这个阶段是一个对事件和生命周期的准备阶段，也是必不可少的
   */
 },
 created () { 
    /* 
     这个阶段：组件创建结束
       data  data选项中的数据获到了
       RDOM  真实dom拿不到
       项目中： 
           数据的修改
           异步数据请求
   */
 },
 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 () {
   console.log( 'beforeDestroy ')
 },
 destroyed () {
   clearInterval( this.time )
   console.log( 'destroyed')
 }

名词解释：
钩子函数：钩子函数就是options配置项中的一个方法，在特定的触发条件（时机）下会自动触发
除了根实例组件以外，其他的组件中的数据项 data 必须是一个函数，而且这个函数必须返回一个对象
为什么是函数呢？
原因：我们希望组件的数据是独立的，有一定作用域的
为什么返回值是对象？
原因：是为了符合数据驱动原理设计，让observer将data选项中的数据设置 getter 和 setter
其他选项写在生命周期之上