vue生命周期

• vue的每个组件都是独立的，每个组件初始化的实例都有它自己的生命周期， 从组件的创建、数据初始化、编译模板、挂载dom、渲染、更新、销毁， 这就是vue组件实例一个生命周期

图解：

vue数据初始化时,data props computed watch methods的生成顺序

查看源码：

export function initState (vm: Component) {
    vm._watchers = []
    const opts = vm.$options
    if (opts.props) initProps(vm, opts.props)
    if (opts.methods) initMethods(vm, opts.methods)
    if (opts.data) {
        initData(vm)
    } else {
        observe(vm._data = {}, true /* asRootData */)
    }
    if (opts.computed) initComputed(vm, opts.computed)
    if (opts.watch && opts.watch !== nativeWatch) {
        initWatch(vm, opts.watch)
    }
}

可得：props => methods => data => computed => watch

vue生命周期钩子

创建

• beforeCreate
  实例已经初始化，数据观察和事件机制未形成，无法获取dom节点(无data,无el)
  data、methods、computed、watch都不能访问

• created
  实例已经创建，但仍无法获取dom节点(有data,无el)
  可以使用数据更改数据，异步请求也放在这里

载入

• beforeMount
  仍获取不到dom节点，但是vue需要挂载的根节点已经创建(有data,有el)
  完成模板编译，虚拟dom创建成功，可以使用更改数据

• mounted
  虚拟dom挂载，初始化页面完成后对数据和dom还需要操作的话放在这里

更新

• beforeUpdate
  检查到数据更新，但在dom更新之前执行

• updated
  dom更新之后执行
  避免在这个阶段更新数据，会造成无线循环的更新

销毁

• beforeDestroy
  在销毁实例之前执行

• destroyed
  销毁实例时执行

使用keep-alive

• activated
  keepalive专用，组件激活时调用 -

• deactivated
  keepalive专用，组件销毁时调用