【Vue相关】Vue的生命周期

Vue实例有一个完整的生命周期，即开始创建->初始化数据->编译模板->挂载Dom->渲染->更新->卸载等一系列的过程，官网给出的图如下，外加大佬的一些注明。

1. beforeCreate：数据观测和初始化事件还未开始，此时data的响应式追踪、event/watcher都还没有被设置，也就是说不能访问到data、computed、watch、methods上的方法和数据。

2. created：实例创建完成，实例上配置的data、computed、watch、methods等都可以访问了，但此时渲染的节点还未挂载到DOM，所以不能访问到$el属性。

3. beforeMount：在挂载开始之前被调用，相关的render函数首次被调用。实例已完成模板的编译、把data里面的数据和模板生成html，但此时还未挂载html到页面上。

4. mounted：旧的el被新创建的vm.$el替换，并在挂载到实例上去之后调用。实例已经完成了用上面编译好的html内容替换el属性指向的DOM对象，完成模板中的html渲染到html页面中。

5. beforeUpdate：响应式数据更新时调用，此时虽然响应式数据更新了，但对应的真实DOM还没有被渲染。

6. updated：在由于数据更改导致的虚拟DOM重新渲染时调用，此时DOM已经根据响应式数据的变化更新了。

7. beforeDestroy：实例销毁之前调用， 此时实例仍然可用，this仍然能获取到实例。

8. destroyed：实例销毁后调用，此时Vue实例的所有东西都会解除绑定。

以上是Vue创建、运行、更新到销毁的整个运行周期，除此之外对于生命周期还有activated和deactivated，这是在被keep-alive包裹的组件才会有的两个生命周期。用keep-alive包裹的组件在切换时不会进行销毁，而是缓存到内存中并执行deactivated钩子函数，命中缓存渲染后会执行activated钩子函数。