前端面试(第三波,偏vue)

原创 zxsclq 随笔 前端基础 422阅读 2019-03-03 18:01:25 举报

最近又在找工作了,面试题基本上都是vuejs偏多的,整理一下相关面试。

1,什么是MVVM,MVVM和MVC区别?

MVVMModel-View-ViewModel的缩写(模型,视图,视图模型)
MVCModel-View-Controller的缩写(模型,视图,控制器)
Model 层代表数据模型,可以定义数据修改和操作的业务逻辑;View 代表UI 组件,它负责将数据模型转化成UI 展现出来,ViewModel 是一个同步View 和 Model的对象。MVVM中,Model和View,没有直接联系,都是通过ViewModel,而且ViewModel和Model之间是双向交互的。
跟MVC的区别,MVVM中的ViewModel代替了MVC中的Controller,解决了,mvc中的大量的Dom操作,而引起的页面加载变慢的,影响用户体验。

2,vuejs的优点(特点),三大框架的区别,以及vue和jQuery的区别?

vuejs的优点:(1)简洁 (2) 轻量 (3)快速 (4) 数据驱动 (5) 模块友好 (6) 组件化
和另外两大框架的区别:前端面试相关问题(第一波)中有写到过
与jQuery的区别:vue数据驱动,用指令来进行双向绑定,jQuery节点操作,通过ID,class等等节点,来进行Dom操作,跟原生类似,写法不同。

3,vue路由之间跳转方式,参数如何传递的,vue-router 的使用和实现原理以及导航钩子?

vue路由之间跳转有两种方式,声明式(标签跳转)和 编程式( js跳转)

编程式传参有两种query和params

两者的路由配置是有区别的

vue-router原理:
前端路由是直接找到与地址匹配的一个组件或对象并将其渲染出来。
使用有两种方式:
第一种是hash 以#欺骗浏览器,进行页内导航。
另一种是h5的window.history,使用URL的Hash来模拟一个完整的URL。
当打包构建应用时,把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。
vue-router三种导航钩子
一种是全局导航钩子:router.beforeEach(to,from,next),作用:跳转前进行判断拦截。
第二种:组件内的钩子;
第三种:单独路由独享组件

4,Webpack打包原理,如何配置,怎样按需加载?

原理:将项目看成一个整体,通过一个给定的主文件。webpack通过主文件,找到项目所有的依赖,使用loaders,打包成一个或者多个浏览器可识别的js文件
webpack配置:<entry>用于指定打包的文件。entry值分别可以是字符串、数组和对象。单一入口,可以随意配置,多入口可以写成对象或者数组
<output>用于指定打包后的文件位置。
按需加载:require.ensure()来实现按需加载。以import 这样的方式引入,改为const定义的方式进行引入。

5,Vuex 原理和使用场景?

Vuex 用于管理页面数据状态、提供统一数据操作的生态系统
数据操作必须通过 action - mutation - state change 的流程来进行,再结合Vue的数据视图双向绑定特性来实现页面的展示更新
seate:是vuex里边的一个类似于仓库用来储存数据
getters:是vuex里边读取state的方法
mutations:是vuex一个同步修改数据的方法
actions:是vuex一个异步修改数据的方法

使用场景:单页应用中,组件之间的状态,购物车等。

6,Vuejs如何使用组件,父子组件如何通信?

创建:文件夹中新建vue文件
引入:import ... from ...
注册:components:{}
组件通讯:
父组件通过标签上面定义传值,子组件通过props方法接受数据
子组件向父组件传递数据,子组件通过$emit方法传递参数

7,Vuejs生命周期?

生命周期:Vue 实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程
vuejs有8个生命周期
创建前:beforeCreate,挂载元素el和数据对象data都为undefined
创建后:create,vue实例的数据对象data有了,el还没有
载入前:beforeMount阶段,$el和data都初始化了,但还是挂载之前为虚拟的dom节点,data.message还未替换
载入后:mounted,vue实例挂载完成,data.message成功渲染。
更新前/后:beforeUpdate/Update,当data变化时,会触发beforeUpdate和updated方法。
销毁前/后:beforeDestroy/destroyed,在执行destroy方法后,对data的改变不会再触发周期函数,说明此时vue实例已经解除了事件监听以及和dom的绑定,但是dom结构依然存在

第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

8,Less或者Sass相对于css的优点?

混入(Mixins)——class中的class;
参数混入——可以传递参数的class,就像函数一样;
嵌套规则——Class中嵌套class,从而减少重复的代码;
运算——CSS中用上数学;
颜色功能——可以编辑颜色;
名字空间(namespace)——分组样式,从而可以被调用;
作用域——局部修改样式;
JavaScript 赋值——在CSS中使用JavaScript表达式赋值。

9,axios,ajax,fetch原理浅析?

这三个其实都是用来请求数据的,其实 axios 和 ajax都是对XMLHttpRequest这个对象的封装;而fetch则是window下的一个方法,是一个更底层的方法。
原生Ajax是指一种创建交互式网页应用的网页开发技术,并且可以做到无需重新加载整个网页的情况下,能够更新部分网页,也叫作局部更新。

ajax使用步骤

1.创建XmlHttpRequest对象
2.调用open方法设置基本请求信息
3.设置发送的数据,发送请求
4.注册监听的回调函数
5.拿到返回值,对页面进行更新、

fetch:Fetch API是基于Promise设计的。解决了原生Ajax或者Jquery封装的Ajax回调地狱问题。

axios:其实axios也是对原生XHR的一种封装,也是Promise实现版本。
回调地狱,就是函数层层嵌套,大家可以自己查阅

10,web前端开发之几种布局方式,响应式布局理解?

1、静态布局(Static Layout)
传统Web设计,对于PC设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分;
2、弹性布局
弹性布局是CSS3引入的强大的布局方式,用来替代以前Web开发人员使用的一些复杂而易错hacks方法(如使用float进行类似流式布局)
3、自适应布局(Adaptive Layout)
特点是分别为不同的屏幕分辨率定义布局。布局切换时页面元素发生改变,但在每个布局中,页面元素不随窗口大小的调整发生变化。
4、流式布局(Liquid Layout)
特点(也叫”Fluid”) 是页面元素的宽度按照屏幕进行适配调整,问题:如果屏幕尺度跨度太大,那么在相对其原始设计而言过小或过大的屏幕上不能正常显示 。
5、响应式布局(Responsive Layout)
分别为不同的屏幕分辨率定义布局,同时,在每个布局中,应用流式布局的理念,即页面元素宽度随着窗口调整而自动适配。 可以把响应式布局看作是流式布局和自适应布局设计理念的融合。

响应式布局步骤
1,布局及设置meta标签
2,通过媒体查询来设置样式media query
3,设置多种视图宽度
4,字体设置

响应式设计注意的问题
1,宽度不固定,可以使用百分比
2,图片设置最大宽度或者宽度固定,高度自动

11,动端页面适配?

rem/em/vm/vh四个相对单位
rem:作用于非根元素时,相对于根元素字体大小
em:作为font-size的单位时,其代表父元素的字体大小
vw:视口宽度的 1/100
vh:视口高度的 1/100

12,vuejs跨域?

跨域:由浏览器的同源策略造成的,是浏览器施加的安全限制
所谓同源是指,域名,协议,端口均相同

解决方案:
1,JSONP带callback的json。缺点JSONP只支持GET请求,不支持POST请求
2,从项目的根目录下打开config/index.js文件,在proxyTable中添加代理:

其他的前端问题,后续继续更新
评论 ( 2 )
最新评论
zxsclq 2019-03-18 16:45:20 2F

面试就是语文作业啊

1024649179 2019-03-07 10:12:06 1F

你跟我做语文作业呢?