前端面试题总结带答案（持续更新）

Vue面试题

1.什么是 vue 生命周期

 Vue 实例从创建到销毁的过程，就是生命周期。
 也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。
 它可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后

2.vue生命周期的作用是什么

它的生命周期中有多个事件钩子，就是函数类似于Jquery的ready()方法，在生命周期变化的时候可以触发这些方法加入业务逻辑。

3.第一次页面加载会触发哪几个钩子（函数）

beforeCreate,created，beforeMount，mounted 

4.简述每个周期具体适合哪些场景

 beforecreate : 可以在这加个loading事件， 在加载实例时触发  

created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用

mounted : 挂载元素， 获取到DOM节点

updated : 如果对数据统一处理，在这里写上相应函数

beforeDestroy : 可以做一个确认停止事件的确认框 nextTick : 更新数据后立即操作dom

5.created和mounted的区别

created一般是在html渲染前的操作，此时el还是undefined，data已经存在。这里不能对dom进行操作

mounted一般是在html渲染完成后的操作，此时el，data都已经加载完成，一般对dom的操作都写在mounted中，例如获取innerHTML，初始化echarts的时候。

6.vue获取数据在哪个周期函数

created

vue路由面试题

1.mvvm 框架是什么？

MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。

在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

在VUE当中的对应关系:

2.vue-router 是什么它有哪些组件

路由，其实就是指向的意思
路由中有三个基本的概念 route, routes, router。
    1， route，它是一条路由，由这个英文单词也可以看出来，它是单数， Home按钮  => home内容， 这是一条route,  about按钮 => about 内容， 这是另一条路由。　　　　
    2， routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。[{home 按钮 =>home内容 }， { about按钮 => about 内容}]　　　　
    3， router 是一个机制，相当于一个管理者，它来管理路由。因为routes 只是定义了一组路由，它放在哪里是静止的，当真正来了请求，怎么办？ 就是当用户点击home 按钮的时候，怎么办？这时router 就起作用了，它到routes 中去查找，去找到对应的 home 内容，所以页面中就显示了 home 内容。
    4，客户端中的路由，实际上就是dom 元素的显示和隐藏。当页面中显示home 内容的时候，about 中的内容全部隐藏，反之也是一样。客户端路由有两种实现方式：基于hash 和基于html5 history api.
 

啊啊

答案参考于以下资料：

书籍：vue.js实战

MVVM模式在VUE当中的对应关系：https://www.jianshu.com/p/6c1c5c3c44d0

个人收集整理前端面试题（答案持续更新ing）：https://www.jianshu.com/p/0b3cb88d2cea