vue组件的生命周期

vue 生命周期图例

每个钩子的职责

生命周期执行顺序

通过一个例子来看：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>

<div id="app">
    <h1>{{ message }}</h1>
</div>

<script type="text/javascript">

    var app = new Vue({
        el: '#app',
        data: {
            message : "hello world"
        },
        beforeCreate: function () {
            console.group('beforeCreate 创建前状态===============》');
            console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
            console.log("%c%s", "color:red","data   : " + this.$data); //undefined
            console.log("%c%s", "color:red","message: " + this.message)
        },
        created: function () {
            console.group('created 创建完毕状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //undefined
            console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
            console.log("%c%s", "color:red","message: " + this.message); //已被初始化
        },
        beforeMount: function () {
            console.group('beforeMount 挂载前状态===============》');
            console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
            console.log("%c%s", "color:red","message: " + this.message); //已被初始化
        },
        mounted: function () {
            console.group('mounted 挂载结束状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
            console.log("%c%s", "color:red","message: " + this.message); //已被初始化
        },
        beforeUpdate: function () {
            console.group('beforeUpdate 更新前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message);
        },
        updated: function () {
            console.group('updated 更新完成状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message);
        },
        beforeDestroy: function () {
            console.group('beforeDestroy 销毁前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message);
        },
        destroyed: function () {
            console.group('destroyed 销毁完成状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message)
        }
    })
</script>
</body>
</html>

一、初始化页面

执行顺序如下：

`beforecreate`

在实例创建之后调用此函数，可以在这里加个loading事件。

`created`

在数据初始化之后被调用，在这里loading结束，进行一些数据请求操作。

`beforeMount`

在组件渲染之前被调用，也就是说在数据渲染之前，样式渲染可以在这里写。在这里应用了“虚拟DOM”技术。还是上面的例子，在beforeMount中。已经渲染出了DOM的“外壳”了，后续只要对这个“外壳”进行数据填充就好了，能在一定程度上对性能进行优化。

beforeMount 挂载前状态===============》
el     : [object HTMLDivElement]
<div id="app">
  <h1>{{ message }}</h1>
</div>
data   : [object Object]
message: hello world

`mounted`

整个实例被创建完成后被调用，比如：实例创建完成，数据初始化，渲染页面数据后才被调用。这个时候可以在mounted这个生命周期里面写DOM操作。

二、更新数据

在chrome 的控制台下执行以下命令：

1	app.message = "你好世界"

执行顺序如下：

三、销毁组件

在控制台执行如下指令对组件进行销毁：

1	app.$destroy()

执行效果如下：

`beforeDestroy`

实例销毁之前被调用，这个方法适用于把new Vue({})赋值给一个变量时，如： var vm = new Vue({})，然后用vm.$destroy() 方法销毁这个实例。

`destroyed`

实例销毁之后被调用，一般情况下，在页面切换路由时，会自动销毁组件

Reference

Vue2.0 探索之路——生命周期和钩子函数的一些理解

Vue生命周期钩子Demo