vue生命周期

生命周期概述

Vue 实例从开始创建、初始化数据、编译模板、挂载Dom和渲染、更新和渲染、卸载等一系列过程，这是 Vue 的生命周期

vue的生命周期里边有八个生命周期钩子函数分别是

• beforeCreat() 创建前
• created（）创建
• beforeMount()挂载前
• mounted（）挂载
• beforeupdate（）更改前
• updated（）更改
• beforeDestroy()销毁前
• destroyed（）销毁

各个周期的执行时间

1. beforeCreate
   实例被完全创建之前执行，此时data和method中的数据还没有被初始化

2. created
   data和method中的数据已经被初始化，这是data和method最早可以被使用的时间

3. beforeMount
   此时模板已经已经存在在内存中，但是还没有渲染到页面

4. mounted
   模板已经从内存中挂在到页面中，用户可以看到完整的页面了

5. beforeUpdate
   数据更新前触发，在这里阶段页面中的数据和内存中的数据是不同步的。内存的数据是最新的，页面中的旧的。

6. updated
   在这个阶段页面中的数据和data中的已经是同步的了。

7. beforeDestroy
   实例被消除前执行，此时实例中的data、method、filter等仍然是可用的。

8. destroyed
   此时实例中的data、method、filter等已经不可用

状态变化图如下：

使用方法

以create为例：

var vm=new Vue({
    el:'#app',
    data:{
    },
    created:{
        //这里书写函数体
        //此函数会在本组件创建后执行
        console.log("组件已创建")
    }
})