Web前端最全Vue学习之实例生命周期(1)，秋招面试常见问题

总结

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

首先我们来看下beforeCreate这个方法，这个方法是生命周期的第一个方法，此时Vue实例中的 data 和 methods的内容都还没有被加载如下:

基础页面

然后我们来看下 beforeCreate方法的效果

通过页面 控制台 可以看到 data中的数据和 methods中的方法都没有被初始化好。

created

---

接下来看下 created 方法，该方法是在Vue实例创建完成后被调用用的，且 data和methods 中的都被初始化好了，我们来测试下。

效果

beforeMount

---

beforeMount 执行的时候 已经完成了模板的编译，但是还没有挂载到页面中,我们通过案例来演示下。

效果

通过效果可以看出 beforeMount 方法执行的时候 内存的中的数据已经被改变了，但是页面中的数据还没有被渲染。

mounted

---

mounted方法执行的时候已经将编译好的模板，挂载到了页面指定的容器中显示。

效果

通过效果也能看出 mounted 方法执行的时候，内存和页面的数据都已经更新了。

注意： mounted 是 实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静的躺在我们的内存中，一动不动.

beforeUpdate

---

接下来的是运行中的两个方法，beforeUpdate 方法，状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点。

通过效果我们可以看到，当beforeUpdate方法执行的时候，内存的数据被更新了，但是此时 页面中的数据还没有被更新。

updated

---

实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！

效果

最后

基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】