vue每个生命周期内都可以做什么

Vue生命周期

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

阶段及作用：

创建前/后(1.beforeCreate,2.created),

载入前/后(3.beforeMount,4.mounted),

更新前/后(5.beforeUpdate,6.updated),

销毁前/后(7.beforeDestroy,8.destroyed),

激活时/未激活时(9.activated,10.deactivated)，

当捕获一个来自子孙组件的错误时被调用(11.errorCaptured)

具体状态及作用如下：

1.beforeCreate（只执行1次）

不常用

2.created（只执行1次）

状态：组件的props/data/methods都已创建好，都处于可用状态。但是组件的模板结构尚未生成，不能操作dom
作用：非常常用，可在此阶段调用methods中的方法，请求服务器的数据，并把数据转存到data中，供template模板渲染时使用

3.beforeMount（只执行1次）

状态：将要把内存中编译好的HTML结构渲染到浏览器中，此时浏览器中还没有当前组件的dom结构
作用：不常用，也可以发起请求

4.mounted（只执行1次）

状态：已经把内存中的HTML结构成功的渲染到浏览器中，此时浏览器中已经包含当前组件的dom结构
作用：最早可以操作dom的阶段
注：此阶段只执行一次，所以无法获取更新后的dom元素

5.beforeUpdate（可执行0~无限次）

状态：data中的数据变化时会触发一次更新，此阶段将要根据数据变化后、最新的数据重新渲染模板结构
作用：data数据是最新的，但是页面上的UI内容还没有改变

6.updated（可执行0~无限次）

状态：已经根据最新的数据，完成了组件dom结构的重新渲染
作用：可以展示最新的data数据和页面结构，数据和UI同步，此阶段可在数据变化后操作最新的组件dom元素
注：要与this.$nextTick (cb) 区分，此方法是会把 cb 回调推迟到下一个dom更新周期之后执行（只是一个，要注意区分updated是可以无限执行，参考输入框获取焦点的例子）

mounted() {
    this.isShow = true;
    // this.$refs.fos.focus();  //先更新DOM，然后直接这样写获取不了焦点。
    // 因为实现相应式并不是数据发生变化后DOM立刻发生变化，
    // 而是在$nextTick下次DOM更新结束之后的延迟回调，在回调函数中获取数据更新之后的DOM
    this.$nextTick(function () {
        this.$refs.fos.focus();
    })
}

7.beforeDestroy（只执行1次）

状态：将要销毁组件，但尚未销毁，组件仍然是正常工作状态
作用：极少用

8.destroyed（只执行1次）

状态：组件已被销毁，浏览器中对应的dom已完全被销毁
作用：极少用（可配合v-if指令进行理解）

总结：