Vue2：生命周期

Vue 实例创建到销毁的整个过程。

钩子函数

Vue 框架内置函数，随着组件的生命周期阶段，自动执行。

可以知道 Vue 声明周期到达了哪个阶段。

• 作用：特定的时间点，执行特定的操作。
• 场景：组件创建完成后，可以在 created 生命周期函数中发起 Ajax 请求，从而初始化 data 数据。
• 四个阶段：初始化、挂载、更新、销毁。
  • 在before… 时，都是在内存中执行的。

初始化

• beforecreate：一般使用场景是在加 loading 事件 的时候。
• created：处于loading 结束后，还做一些初始化，实现函数自执行（data数据已经初始化，但是DOM结构渲染完成，组件没有加载）。

挂载

• beforemount：处于组件创建完成，但未开始执行操作。
• mounted：处于发起后端请求，获取数据，配合路由钩子执行操作（DOM渲染完成，组件挂载完成 ）。

更新

• beforeupdate、updated：处于数据更新的前后。

销毁

一般用作清除定时器。

• beforeDestroy：当前组件还在的时候，想删除组件。
• destroyed：当前组件已被销毁，清空相关内容 。

生命周期

执行过程

App.vue

<template>
  <div>
      <Life v-if="isShow == true">Life>
      <button @click="isShow = false">点击销毁组件button>
  div>
template>

<script>
import Life from './components/life.vue'

export default {
  data () {
    return {
      isShow: true,
    }
  },
  components: {
    Life,
  },
}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Life.vue

<template>
  <div id="myApp">
    {{ msg }}
    <button @click="msg = 'Hello Vue'">点击修改msg的值button>
  div>
template>

<script>

export default {
  data () {
    return {
      msg: 'Hello World'
    }
  },
  
  /* 初始化阶段：在Vue实例创建完成之前触发，
      这时候还没有初始化data中的数据以及methods中的方法
   */
  beforeCreate () {
    console.log('beforeCreate执行了');
    
    console.log(this.msg, 'msg');   // undefined
  },

  /* 初始化阶段：
      这时候data中的数据初始化完成，但是拿不到真实dom
   */   
  created () {
    console.log('created执行了');

    console.log(this.msg, 'msg');   // Hello World
    console.log( document.querySelector('#myApp'), '#myApp');   // null

    // 测试销毁组件：销毁定时器
    //  因为本质是对象，可以使用this.创建属性
    this.timeId = setInterval(function() {
      console.log(1);
    }, 1000);
  },

  /* 挂载阶段：将 template模板中的内容在内存中编译完成，会立即执行函数，
      内存中的模板结构还没有真正渲染到页面上，所以看不到真实的数据，只能看到一个模板。
   */
  beforeMount () {
    console.log('beforeMount执行了');

    console.log( document.querySelector('#myApp'), '#myApp');   // null
  },

  /* 挂载阶段：把内存中渲染好的模板结构替换到页面上。
      能获取真实dom。
   */
  mounted () {
    console.log('mounted执行了');

    console.log( document.querySelector('#myApp'), '#myApp');   // 
···
  },

  /* 更新阶段：数据的最新的，但是页面呈现的数据还是旧的。
  */
  beforeUpdate () {
    console.log('beforeUpdate执行了');

    console.log(this.msg, 'this.msg');  // Hello Vue
  },

  /* 更新阶段：页面完成更新，data中的数据和页面的数据都是最新的。
      可以获取最新的dom元素。
   */
  updated () {
    console.log('updated执行了');

    console.log(this.msg, 'this.msg');   // Hello Vue
    console.log( document.querySelector('#myApp') );  // 最新的dom
  },

  /* 销毁阶段：
   */
  beforeDestroy () {
    console.log('beforeDestroy执行了');
  },

  /* 销毁阶段：可以清理定时器，清理事情绑定。
   */
  destroyed () {
    console.log('destroyed执行了');

    // 销毁定时器
    clearInterval(this.timeId);
  },
}
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

总结

• 初始化

  在Vue实例创建完成之前触发，还没有初始化data中的数据以及 methods 中的方法。

  可以在这里 最早发起 Ajax 请求，从而初始化 data 数据。

  .vue 中写的是虚拟dom，.html 中的标签都是真实dom。

  好处：虚拟dom只更新更改的dom属性，不会遍历所有的属性，更快，更节省性能。

• 挂载

  将 template 模板中的内容在内存中编译完成，会立即执行函数，并将模板结构替换到页面上。

  场景：会在 mounted 中初始化一些插件。

• 更新

  当 data 里数据改变，并更新页面元素时，会触发更新。

  在 updated 中获取最新的dom元素。

• 销毁

  场景：手动清除计时器/定时器/全局事件。

beforeCreate 通过Ajax准备数据，mounted 渲染页面，beforeUpdate 更新数据，destroyed 清除事件。