一、vue 的钩子相关顺序

Vue实例有一个完整的生命周期，在new Vue（）后，会初始化数据，如下：

//初始化的入口，各种初始化工作initMixin(Vue);//数据绑定的核心方法，包括常用的$watch方法stateMixin(Vue);//事件的核心方法，包括常用的$on，$off，$emit方法eventsMixin(Vue);//生命周期的核心方法lifecycleMixin(Vue);//渲染的核心方法，用来生成render函数以及VNoderenderMixin(Vue);

在initMixin中，可以看出，对应的周期钩子操作顺序如下：

vm._self = vm;initLifecycle(vm);initEvents(vm); //初始化事件initRender(vm);callHook(vm, 'beforeCreate');initInjections(vm); // resolve injections before data/propsinitState(vm);initProvide(vm); // resolve provide after data/propscallHook(vm, 'created');

故加载及销毁顺序如下：

加载页面执行步骤1、父组件：beforeCreate -> created -> beforeMount2、子组件：beforeCreate -> created -> beforeMount -> mounted3、父组件：mounted销毁组件执行步骤1、父组件：beforeDestroy2、子组件：beforeDestroy3、子组件：destroyed2、父组件：destroyed

二、vue的各个钩子能做哪些操作

beforeCreate：在此阶段，实例刚在内存中被创建出来。此时，data的数据和methods中方法的都还没有初始化，数据和模板均获取不到created：在此阶段，实例已经在内存中创建完成。data 和 methods、computed都已经被初始化好了，如果要调用 methods 中的方法，或者操作 data 中的数据，最早可以在这个阶段中操作。此生命周期为最早可进行ajax异步数据请求的生命周期，服务端渲染也可在此进行beforeMount：执行到这个钩子的时候，在内存中已经编译好了模板了，相关的render函数首次被调用（虚拟DOM）,但是还没有挂载到页面中，此时，页面还是旧的mounted：执行到这个钩子的时候，就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段，进入到了运行阶段。 如果我们想要通过插件操作页面上的DOM节点，最早可以在和这个阶段中进行，mounted只会执行一次。beforeUpdate：当执行这个钩子时，页面中的显示的数据还是旧的，data中的数据是更新后的， 页面还没有和最新的数据保持同步，不会触发附加地重渲染过程updated：调用时，组件DOM已经更新，页面显示的数据和data中的数据已经保持同步了，都是最新的 。所以可以执行依赖于DOM的操作，然后在大多是情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环，该钩子在服务器端渲染期间不被调用beforeDestory：Vue实例从运行阶段进入到了销毁阶段，这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于可用状态。还没有真正被销毁，此时还是可以访问实例的属性另外两个：activated  keep-alive组件激活时调用。  该钩子在服务器端渲染期间不被调用。deactivated  keep-alive组件停用时调用。  该钩子在服务端渲染期间不被调用。activated()和deactivated()只有在<keep-alive></keep-alive>包裹的时候才有效；