vue生命周期详解及经典面试题

Vue - 生命周期详解

vue实例有一个完整的生命周期，也就是从节点开始创建、初始化数据、编译模板、挂载DOM、渲染-更新-渲染-卸载销毁一系列过程，我们称为vue的实例的生命周期，而生命周期的钩子就是在某个阶段给一些做处理的机会。

每个周期详解

生命总共分为8个阶段创建前/后、载入前/后、更新前/后、销毁前/后。

创建前/后
描述生命周期前，首先给大家解释一下vue实例这个概念，vue实例可以理解为：类似于创建一个对象，里面包含钩子函数、data、methods、components，也就是我们在vue页面框架中常见的 export default部分的数据data及各个生命周期。
那反之理解，如果我们的函数执行放在beforeCreate周期，此时实例还未初始化，我们是访问不到方法的，所以函数的执行更不成立。

beforeCreate（创建前）：
在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创建。vue实例的挂载元素el和数据对象data都为undefined，还未初始化。所以此时无法访问methods,data,computed等上的方法和数据。
created(创建后) ：
实例创建完成之后被调用，vue实例的数据data有了，el还没有。
在这一步，实例已完成以下配置：数据观测、属性和方法的运算，watch/event事件回调，完成了data 数据的初始化，el没有。然而，挂载阶段还没有开始, $el属性目前不可见。
这是一个常用的生命周期，因为你可以调用methods中的方法，改变data中的数据，并且修改可以通过vue的响应式绑定体现在页面上，获取computed中的计算属性等等，通常我们可以在这里对实例进行预处理，也有人喜欢在这里发ajax请求，值得注意的是，这个周期中是没有什么方法来对实例化过程进行拦截的，因此假如有某些数据必须获取才允许进入页面的话，并不适合在这个方法发请求，建议在组件路由钩子beforeRouteEnter中完成。

载入前/后
beforeMount：挂载开始之前被调用，vue实例的$el和data都初始化了,但还没有挂载之前都是虚拟的demo阶段,data.message还未替换。实例已完成以下的配置：
编译模板，把data里面的数据和模板生成html，完成了el和data 初始化，注意此时还没有挂在html到页面上！！！！

mounted：vue实例挂载完后,data.message成功渲染，也就是模板中的HTML渲染到HTML页面中。此时一般可以做一些ajax操作，mounted只会执行一次。

更新前/后
当data变化时,户触发beforeUpdate和update方法。

销毁前/后
在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经结束了事件监听以及和dom的绑定，但是dom结构依然存在。

高频面试题

1. 第一次页面加载会触发哪几个钩子?
   第一次页面加载时会触发beforeCreate、created、beforeMount、mounted这几个钩子。

2. DOM渲染在那个周期中已完成？
   DOM渲染在mounted中就已经完成了。

关于第一个图中的代码，script标签中对于vue的引入，我们一般写项目是不会这样操作的，而是直接在创建项目时，vue create 项目名 这样创建为vue项目。

关于在vue框架中生命周期相关应用，每个人的习惯都是不一样的，我自己习惯在methods中写相关方法，在created中this.方法执行。而data中就是我们项目的数据模型。

欢迎分享交流！