前端面试大全2019

一时失言乱红尘 2022-04-24 06:30 232阅读 0赞

> **小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大佬公司都在使用。**

1、对mvvm模式的理解？  
mvvm是model view viewModel的缩写 model 是数据模型 定义数据修改和操作的业务逻辑 view是ui组件 将数据模型转换成Ui展现出来 viewModel监听模型数据的改变 控制视图行为 处理用户交互 通过双向数据绑定将view和model连接起来 view和model之间的同步是自动的 无需人为干涉 所以开发者只需要关注业务逻辑而不需要操作dom 更无须关注数据状态的同步问题 复杂的数据状态维护就交给mvvm统一管理。

2、vue生命周期？  
vue实例从创建到销毁的过程，就是生命周期。 也就是从开始创建、初始化数据，编译模板、挂载DOM —渲染、更新—渲染、卸载等一系列过程，称为Vue的生命周期 分为 8个阶段 创建前后 载入前后 更新前后 销毁前后。  
BeforeCreate 组件实例刚刚被创建，获取不到props或者data中的数据，这些数据初始化都在initState中。  
Created 实例已经被创建完成之后调用，可以访问到之前不能访问到的数据，但是组件还没有被挂载。  
BeforeMount 挂载开始之前被调用。  
Mounted dom节点被渲染到文档内，一些需要dom的操作在此时才能正常进行。  
BeforeUpdate 数据更新时调用，发生在虚拟dom重新渲染之前 在这个钩子中进一步地更改状态 不会触发附加的重渲染过程  
Update 组件DOM已经更新，可以执行依赖于DOM的操作，但应该避免在此期间更改状态 有可能会导致更新无限循环。  
BeforeDestory 实例销毁之前调用，实例仍然可以调用。  
Destroyed 实例被销毁后调用 调用后vue实例指示的所有东西都会解绑，事件监听器会被移除，所有子实例也会被销毁，该钩子在服务器端渲染期间不被调用。

3、Vue实现双向数据绑定的原理？  
vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的，通过劫持object.defineProperty()中的set和get属性。

4、Vue组件间传递参数？  
父组件给子组件：父组件通过子标签绑定的属性，子组件通过props接收  
子组件给父组件：子组件通过![emit将值传给父组件，父组件监听子组件触发的事件 兄弟通信：this.][emit_ _this.]parent.![children 在][children]children中可以通过组件name查询到需要的组件实例，然后传值

5、React和Vue的区别？  
相同：都支持服务器端渲染，组件化开发通过props参数进行父子组件数据的传递，数据驱动视图，  
不同：vue是双向数据绑定，react数据流动是单向的。Vue渲染过程是跟踪每一个组件的依赖，更改了哪个组件渲染哪个，react重新渲染全部组件

6、对keep-alive的了解？  
是Vue的内置组件，可以使被包含的组件保留状态，避免重新渲染  
拥有两个独有的生命周期钩子函数，activated和deactivated  
被包裹在keep-alive中的组件的状态将会被保留，例如我们将某个列表类组件内容滑动到第100条位置，那么我们在切换到一个组件后再次切换回到该组件，该组件的位置状态依旧会保持在第100条列表处

7.<keep-alive></keep-alive>的作用是什么?  
<keep-alive></keep-alive> 包裹动态组件时，会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染。  
大白话: 比如有一个列表和一个详情，那么用户就会经常执行打开详情=>返回列表=>打开详情…这样的话列表和详情都是一个频率很高的页面，那么就可以对列表组件使用<keep-alive></keep-alive>进行缓存，这样用户每次返回列表的时候，都能从缓存中快速渲染，而不是重新渲染

8、![route和][route]router的区别？  
![route是路由信息对象，包括path params query name等路由信息参数][route_path params query name]router是路由实例对象，包括了路由的跳转方法，钩子函数等  
query和params的区别：query相当于get请求，页面跳转的时候可以在地址栏看到请求参数，用path来引入；params相当于post，地址栏不显示参数 用name来引入  
路由的钩子函数：beforEach  
to:即将要进入的目标 包括的属性（path params query name meta matched fullPath）

9、vue常用的修饰符？  
.prevent 阻止元素默认跳转 .stop 阻止单击事件冒泡 .capture捕获 .once 只执行一次

10、怎么定义vue-router的动态路由以及如何获取传过来的动态参数？  
在router目录下的index.js文件中，对path属性加上/:id  
使用router对象的params.id

11、vue+axios登录拦截  
在定义路由的时候加上requireAuth，判断该路由的访问是否需要登录 如果已经登录则顺利进入页面。定义完路由后利用vue-router提供的钩子函数beforeEach()对路由进行判断 判断是否需要登录权限，判断是否存在token  
想要统一处理所有http请求和响应，用axios拦截器 通过配置http response inteceptor ,当后端返回401时，则未授权 让用户重新登录

12、Vuex是什么？怎么使用？哪种功能场景使用它？  
只用来读取的状态集中放在sotre中，改变状态的方式是提交mutations，这是个同步事物；异步逻辑应该封装在action中  
组件渲染之后，与用户产生交互，触发一些行为(dispatch ---->action)，这些行为会提交一些修改数据的行为(commit ---->mutations)， 这些行为会主动修改状态(state)中的数据，状态数据的改变会更新组件

13、vue路由原理  
只有2种实现方式 hash模式和history模式  
hash模式：带\#号的，当\#后面的哈希值发生变化时，可以通过hashchange事件来监听到URL变化，进行页面跳转（简单，兼容性好）  
history模式：h5新功能，使用history.pushState和history.replaceState改变URL

14、computed和watch区别  
computed是计算属性，依赖其他属性计算值，并且computed的值有缓存，只有当计算值变化才会返回内容  
Watch监听到值的变化就会执行回调，在回调中进行一些逻辑操作  
一般需要依赖别的属性来动态获得值的时候可以使用computed  
对于监听到值的变化需要做一些复杂业务逻辑的情况可以使用watch

15、v-if和v-show的区别  
v-show 只是通过设置dom元素的display控制显示隐藏  
V-if 是动态的添加或删除dom元素

[Fundebug]: https://www.fundebug.com/
[emit_ _this.]: https://math.jianshu.com/math?formula=emit%E5%B0%86%E5%80%BC%E4%BC%A0%E7%BB%99%E7%88%B6%E7%BB%84%E4%BB%B6%EF%BC%8C%E7%88%B6%E7%BB%84%E4%BB%B6%E7%9B%91%E5%90%AC%E5%AD%90%E7%BB%84%E4%BB%B6%E8%A7%A6%E5%8F%91%E7%9A%84%E4%BA%8B%E4%BB%B6%20%E5%85%84%E5%BC%9F%E9%80%9A%E4%BF%A1%EF%BC%9Athis.
[children]: https://math.jianshu.com/math?formula=children%20%E5%9C%A8
[route]: https://math.jianshu.com/math?formula=route%E5%92%8C
[route_path params query name]: https://math.jianshu.com/math?formula=route%E6%98%AF%E8%B7%AF%E7%94%B1%E4%BF%A1%E6%81%AF%E5%AF%B9%E8%B1%A1%EF%BC%8C%E5%8C%85%E6%8B%ACpath%20params%20query%20name%E7%AD%89%E8%B7%AF%E7%94%B1%E4%BF%A1%E6%81%AF%E5%8F%82%E6%95%B0