Vue_生命周期函数

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期的函数，这给了用户在不同阶段添加自己的代码的机会。

vue2中的生命周期函数

生命周期图示

1.beforeCreate

特点： 此时Vue实例化对象刚刚初始化还是一个空对象，仅仅是初始化了默认事件与生命周期函数；还没有创建data/methods等配置项和挂载点。此时还不能访问data和methods，等配置项也无法获取dom节点。

2.created

特点：此时配置项已经进行初始化但是还未创建挂载点，此时可以访问data和methods等配置项,但是拿不到vue渲染之后的Dom元素。

3.beforeMount

特点：beforeMount为数据初次渲染前的回调，此时读取了el(确定了vue的使用范围)，但是还没有将el挂在到dom元素上， 不能访问vue渲染后的dom元素。

4.mounted

特点：mounted为数据初次渲染之后的钩子，可以访问vue渲染之后的dom元素
应用：主要是进入页面之后的dom操作(主要是想在数据渲染到dom操作之后做处理在这个勾子中);

5.beforeUpdate

• 数据更改前的回调
• 执行时机：vue页面中使用的数据已修改,但是还没有完成相应数据渲染；

6.updated

• 数据更改后的回调

• 执行时机： vue页面中使用的相关值修改且页面已经完成相关渲染时就会执行这个勾子；

  ​ 比如说我在data中定义了一个num，但是在html结构(页面)中并没有使用这个num，此时修改了num之后并不会走updated这个勾子；

  ​ 若是在html中使用了num，当num做了修改之后，就会走updated这个勾子；

7.beforeDestroy

• vue实例销毁前的回调

• 特点

  • 什么都可以访问；
  • 准备销毁；

• 作用

  • 用于善后工作(eg：清除定时器)

8.destroyed

• vue实例销毁之后
• 特点
  • 中断了渲染(就是中断了html与js的联系)
  • 但是还可以访问data与methods；
• 应用：用于处理善后工作

9.举例

<template>
  <div style="margin-top:20px" id="box">
    {{ value }}
  </div>
</template>

<script>
export default {
  data(){
    return{
      value:111
    }
  },
  beforeCreate(){
    console.log('-------beforeCreate-------')
    console.log('data数据', this.value) // 'data数据' undefined
    console.log('dom',document.getElementById('box')) // null
    console.log('el', this.$el)
  },
  created(){
    console.log('-------created-------')
    console.log('data数据', this.value)// 'data数据' 111
    console.log('dom',document.getElementById('box')) // null
    console.log('el', this.$el)
  },
  beforeMount(){
    console.log('-------beforeMount-------')
    console.log('data数据', this.value)// 'data数据' 111
    console.log('dom',document.getElementById('box')) // null
    console.log('el', this.$el)
  },
  mounted(){
    console.log('-------mounted-------')
    console.log('data数据', this.value)// 'data数据' 111
    console.log('dom',document.getElementById('box')) // 元素
    console.log('el', this.$el)
  },
  
  beforeDestroy(){
    console.log('-------beforeDestroy-------')
    console.log('data数据', this.value)// 'data数据' 111
    console.log('dom',document.getElementById('box')) // null
    console.log('el', this.$el)
  },
  destroyed(){
    console.log('-------destroyed-------')
    console.log('data数据', this.value)// 'data数据' 111
    console.log('dom',document.getElementById('box')) // null
    console.log('el', this.$el)
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

当点击按钮进行路由跳转时会触发 beforeDestroy与destroy生命周期函数

10.生命周期钩子总结

• [1]生命周期函数并不是一个一个执行的；

  eg:在执行created时，并不是执行完created再执行beforeMount；而是在执行created的过程中又执行了beforeMount;

• [2]最早可以获取配置项数据的是created生命周期函数；

• [3]最早可以获取vue渲染之后的dom结构的是mounted生命周期函数；

  created(){
   console.log(document.querySelector('body'));//可以获取
   console.log(document.querySelector('.find'))；//获取不到
  }
  1
  2
  3
  4

  如上代码：为什么可以获取body元素？

  因为 只有在 template标签之间的dom元素才是本组件需要渲染的dom元素；body并不属于其中；

• [4]不要在beforeUpdate和updated中更改数据，会造成死循环；（原因：当数据更改就会走这个钩子，而你在里面进行数据更改又会走这个钩子，不断反复）；

• [5]beforeDestroy使用--主要是清除一些操作–一般当路由跳转的时候，这个页面的vue实例就进行销毁了-就会执行beforeDestroy与destroyed生命周期函数;

  当页面存在定时器setInterval时可以在这个阶段清除定时器；

  注：定时器不属于当前页面独立的在一个异步队列中；不受到vue生命周期的管控！

    //eg:在登录的时候，手机验证码的那个时间到技术使用的是定时器技术
    # 创建一个定时器
    created(){
      this.timeId=setInterval(()=>{
        this.time--;
        console.log(this.time);
      },1000)
    },
      # 在路由跳转的时候，走beforeDestory这个钩子(在这个钩子中我们可以做清空定时器操作)
    beforeDestroy() {
      console.log(111);
      clearInterval(this.timeId)
    },
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13

缓存中的生命周期

vue内置组件-keep-alive
若是组件被缓存了，那么在进行组件切换时并不会走生命周期函数，为了方便处理一些逻辑关系，在缓存组件中添加了activated、deactivated生命周期函数。

父子组件的渲染过程

加载渲染过程：beforeCreate(父) —> created(父)—>beforeMount(父)—>beforeCreate(子)—>created(子)—>beforeMount(子)—>mounted(子)—>mounted(父)
更新过程：beforeUpdate(父) —> beforeUpdate(子) —> update(子) —> update(父)
父组件更新：beforeUpdate(父) —> updated（父）
销毁过程：beforeDestory(父) —> beforeDestory(子) —> destoryed(子) —> destoryed(父)

vue3中的生命周期函数

生命周期图示

在vue3中保留了vue2中的生命周期，但是有两个生命周期函数被更名：beforeDestroy改名为 beforeUnmount、destroyed改名为 unmounted。
举例说明

<template>
  <div>
    <span>{{ name }}</span>
    <button @click="editName">editName</button>
  </div>
</template>
<script>
import { ref } from 'vue'
export default{
  beforeCreate(){
    console.log('@@@beforeCreate@@@')
  },
  created(){
    console.log('@@@created@@@')
  },
  beforeMount(){
    console.log('@@@beforeMount@@@')
  },
  mounted(){
    console.log('@@@mounted@@@')
  },
  beforeUpdate(){
    console.log('@@@beforeUpdate@@@')
  },
  updated(){
    console.log('@@@updated@@@')
  },
  beforeUnmount(){
    console.log('@@@beforeUnmount@@@')
  },
  unmounted(){
    console.log('@@@unmounted@@@')
  },
  setup(){
    console.log('@@@setup@@@')
    const name = ref('chaochao')
    function editName(){
      name.value = 'niuniu'
    }
    return {
      name,
      editName
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

组合API式生命周期

如上，虽然vue2.x中配置项形式的生命周期被保留下来了，但是它获取不了setup中定义的数据显然在操作上没有那么方便，为此在vue3.x中提供了组合API形式的生命周期，对应如下

• beforeCreate===>setup
• created =======>setup
• beforeMount ===>onBeforeMount
• mounted =======>onMounted
• beforeUpdate ===>onBeforeUpdate
• updated =======>onUpdated
• beforeUnmount ==>onBeforeUnmount
• unmounted =====>onUnmounted
• 兼容性：配置项的生命周期可以与组合API式生命周期兼容(不建议同时使用)；若是同时使用， 组合式API生命周期先行调用。
  举例说明

<template>
  <div>
    <span>{{ name }}</span>
    <button @click="editName">editName</button>
  </div>
</template>
<script>
import { ref, onBeforeMount } from 'vue'
export default{
  beforeCreate(){
    console.log('@@@beforeCreate@@@')
  },
  created(){
    console.log('@@@created@@@')
  },
  beforeMount(){
    console.log('@@@beforeMount@@@')
  },
  mounted(){
    console.log('@@@mounted@@@')
  },
  setup(){
    console.log('@@@setup@@@')
    const name = ref('chaochao')
    function editName(){
      name.value = 'niuniu'
    }
    onBeforeMount(()=>{
      console.log('@@@onBeforeMount@@', name.value)
    })
    return {
      name,
      editName
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37