vue生命周期以及执行顺序

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

created

官方定义：
实例创建完成后被立即调用，在这一步，实例已完成以下配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见
个人理解：
模板渲染成html前调用，此时模板还没有被渲染成html，这时候通过id去查找页面元素是找不到的。通常用于初始化某些属性值，然后再渲染成视图。
用法：通常用于初始化数据。

computed

官方定义：
计算属性将被混入到 Vue 实例中，所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
个人理解：
在HTML DOM加载后马上执行的，比如赋值，比created更早执行。
注意：
计算属性也是属性，不能传参数

watch

官方定义：
用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项
个人理解：
是一种更通用的方式来观察和响应 Vue 实例上的数据变动，Vue 实例将会在实例化时调用$watch()，遍历 watch 对象的每一个属性

mounted

官方定义：
在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
个人理解：
vue模板已经渲染完毕，Dom操作一般是在mounted钩子函数中进行，document.getElementById(“name”).innerHtml 可以获取到，mounted 是指挂载完成，DOM结构加载完毕，一般要是执行ajax操作就是在这里

methods

官方定义：
将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例
个人理解：
必须要有一定的触发条件才能执行，如点击事件

默认加载顺序

computed–>created–>mounted–>watch，不执行methods

触发某一事件后

methods–>watch