vue及其生命周期介绍

什么是vue？

Vue是JavaScript的MVVM库，只关注视图层，以数据为驱动，Vue将自身和DOM进行绑定，DOM和数据同步变化，ViewModel是Vue的核心，它是Vue的一个实例，DOM Listeners和Data Bindings是双向绑定的关键

Vue将 HTML模板 配合 传入Vue构造函数中的JSON数据 渲染进DOM。Vue的主要关注点在视图层，围绕其生命周期钩子函数展开。在beforeCreate之前，Vue为其实例初始化部分属性，在created之后，vue初始化了其props，methods，data，属性，同时实现对data数据的观察，因此created之后就可以访问vue上的data属性了，接着是beforeMount，将传进来的el赋给vue的$el作为组件的容器。mounted时，数据已经渲染进模板中并在页面上显示。

Vue可以很方便的将复杂的功能拆分成一个个组件，并能很方便的实现组件之间的通信。同时配合vue-router可以很方便的实现前端路由，配合vue-resource实现跨域资源获取。

特点

• 简洁：页面由HTML模板+JSON数据+Vue实例组成
• 数据驱动：可自动计算属性的模板表达式
• 组件化：组件可复用，解耦
• 轻量：代码量小，不依赖于其他库

1.beforecreate

Vue实例vm数据未初始化，包括vm.props，vm.methods,vm.data,vm.el等，因此此时不能获取到vm上的任何属性。

假设有Vue实例：

new Vue(options);
var vm = new Vue({
        el: '#app',
        data: {
            message : "Welcome Vue"
        }
});

则在初始化vue实例时的选项options中加入beforeCreate钩子函数，

 beforeCreate: function () {
    console.log(this.$el); //undefined
    console.log(this.$data); //undefined
    console.log(this.message);//undefined
 }

由于此时并没有初始化vm上的数据，因此，this.$el，this.$data，this.message都为空。

2.created

此时vm上的数据data，message以初始化，但是this.$el即挂载点并未初始化。

  created: function () {
    console.log(this.$el); //undefined
    console.log(this.$data); //[object Object]  =>  已被初始化
    console.log(this.message); //Welcome Vue  =>  已被初始化
 },

3.beforeMount

此阶段获取挂载点this.$el，其余和created相同。

 beforeMount: function () {
    console.log(this.$el); //已被初始化，内容为： [object HTMLDivElement]，即HTML模板
    console.log(this.$data); //[object Object]  =>  已被初始化
    console.log(this.message); //Welcome Vue  =>  已被初始化
 },

4.mounted

此阶段页面挂载点已被初始化。

 mounted: function () {
    console.log(this.$el); //已被初始化，内容为： [object HTMLDivElement]，即页面元素
    console.log(this.$data); //[object Object]  =>  已被初始化
    console.log(this.message); //Welcome Vue  =>  已被初始化
 },

5. beforeUpdate

在将this.message = 'update’后，beforeUpdate中会看到this.message的值变了，但是页面并没有更新。

6. updated

改变this.message的值后，会在updated后更新页面。但是在updated中更新vm.data数据，不会提现到页面上来。

7.beforeDestroy

在methods中销毁：

methods:{
    destroy() {
        vm.$destroy();
    }
}

8.destroyed

组件销毁值后调用。