浅谈vue2.0生命周期

beforeCreate ：组件实例刚被创建，组件属性计算之前，如data属性等

<template>
    <div class="router-page-wrap" style="background: #fc595d;">
        this is usercenter
        <input type="text" v-model="message" ref="input">
        {{message}}
    </div>
</template>
<script>
    var common = require('common');
    module.exports = {
        data : function() {
            return {
                message : 'not update'
            }
        },
        beforeCreate : function () {
            console.log('this is beforeCreate :', this.message, this.$refs.input);
        }
    }
</script>

 得到的结果：

 

created : 组件实例创建完成，属性已绑定，但是DOM还未生产，$el属性还不存在

上面代码的基础上我们添加created钩子函数：

 

 此时，我们能够读取到数据data的值，但是DOM还没有生成，所以和DOM相关的属性还不存在，自然也就不能获取DOM元素

beforeMount：模板编译/挂载之前

 

mounted：模板编译/挂载之后，mounted是平时我们使用最多的函数了，一般我们的异步请求都写在这里。在这个阶段，数据和DOM都已被渲染出来。

beforeUpdate：组件更新之前

updated：组件更新之后

activated：for keep-alive ，组件被激活时调用

deactivated：for keep-alive，组件被移除时调用

beforeDestory：组件销毁前调用

destoryed：组件销毁后调用