抱歉，您的浏览器无法访问本站

本页面需要浏览器支持（启用）JavaScript


了解详情 >

介绍

  • vue实例的生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期。

生命周期钩子 = 生命周期函数 = 生命周期事件。

生命周期函数的主要分类

根据上面这张图，我们把生命周期函数主要分为三类。

1、创建期间的生命周期函数

  • beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性

  • created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板。我们可以在这里进行Ajax请求。

  • beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中

  • mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示。（mounted之后，表示真实DOM渲染完了，可以操作DOM了）

举例：

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue2.5.16.js"></script>
</head>

<body>
    <!--这个div区域就是MVVM中的 View-->
    <div id="app">
    </div>
</body>

<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'hello vuejs'