前端面试题 vue

前端面试题

1.Props 和state:
State是一种数据结构，用于组件挂载时的数据来源，state是可以改变的，但大多数时改变都是来自于用户的操作；
Props是由父组件传递给子组件的，组件是不可以改变自身的props的，如果你这样做的话，vue会报错，但是父组件可以把子组件的props放在一起统一管理
2.登录注册的路由守卫：
路由守卫是通过在router/index.js页面下的router.beforeEach下进行路由守卫
它有三个参数 to，form,next;我一般是通过本地localStorage进行存储一条信息；
如果这个信息存在且等于某个值时 我路由守卫的判断就直接next();如果不存在；我就跳转到login页面里面；
3.Redux流程：
Redux 的基本思想是整个应用的 state 保持在一个单一的 store 中。store 就是一个简单的 javascript 对象，而改变应用 state 的唯一方式是在应用中触发 actions，然后为这些 actions 编写 reducers 来修改 state。整个 state 转化是在 reducers 中完成，并且不应该有任何副作用。
4.Reudx中添加异步操作：
首先我们需要npm install redux-thunk;然后在index页面引用后 放入到applyMiddleware当中挂载这个中间件；然后我一般都是在action中使用dispatch来完成异步操作的;
5.前端优化：
合并css，js，和图片；
我们应该尽量减少http请求:http协议是无状态的应用层协议，意味着每次http请求都需要建立通信链路、进行数据传输，而在服务器端，每个http都需要启动独立的线程去处理。这些通信和服务的开销都很昂贵，减少http请求的数目可有效提高访问性能。
6.图片优化：
我们可以使用 精灵图 把一些比较小的图片放在一起 进行加载；
还有我可以使用图片懒加载
7.后台管理那个时间较长：

1.自我介绍：
2.Js 数据类型：number,boolean，string,undefined,null,object
3.复杂数据类型和普通数据类型两者之间有何区别：
普通数据类型它是直接定义到栈里面；可以直接用 == 来判断是否相等；
复杂数据类型 它是定义到堆里面，然后在栈当中存放一个指向这个堆的地址；
使用 == 来判断的是他的地址是否相等；
4.Es6新特性：let const 它们是es6新增的声明方式 其中let 是声明变量的 而const是声明常量的；它们两个都有这自己的块级作用域 并且没有变量提示; 还有箭头函数 他是新增函数 ；箭头函数的优点是 箭头函数没有自己this 他的this是来自上一级也就是他的父级；
还有模板字符串以及解构赋值还新添加了一些数组方法 比如：map forEach, Array.form,some,every,filter;
5.闭包：
闭包就是打通了一条在函数外部访问函数内部作用域的通道；一般来说函数内部是访问不到函数内部的；闭包的优点：作用域安全，缺点是:闭包长期驻留内存，容易造成内存泄漏；解决内存泄漏：把闭包的数据全部变为null;
6.React封装拦截器
我们在使用axios进行数据请求时；会进行许多的操作；比如给请求的数据添加一个token值；在获取到数据之前的请求中动画；如果我们大量进行此类操作会打乱我们代码的观测性；所以axios提供了一个新的api就是拦截器；拦截器主要有请求拦截器和响应拦截器 请求拦截器的作用是：可以让我们在数据即将请求时做的最后操作；比如给数据添加一个token；响应拦截器是在获得数据的第一时间进行操作；比如服务器返回登录状态失效，需要重新登录的时候，跳转到登录页等；
我一般是在request.js中封装拦截器；首先引入axios然后 let request = axios.create(); 然后直接在axios中文文档中搜索拦截器 把请求拦截和响应拦截复制进去；然后在拦截器中进行操作；最后把request通过export给导出出来；
7.封装高阶组件
高阶组件是一个以组件为参数并返回一个新组件的函数。HOC 运行你重用代码、逻辑和引导抽象。最常见的可能是 Redux 的 connect 函数。除了简单分享工具库和简单的组合，HOC最好的方式是共享 React 组件之间的行为。如果你发现你在不同的地方写了大量代码来做同一件事时，就应该考虑将代码重构为可重用的 HOC。
8.React组件传值
我所理解组件传值有三种：分别是父传子，子传父和兄弟传值：
9.封装axios
首先新建建立一个router.js然后在里面写入axios拦截器后把 router导出；然后在api.js文件中引入router文件后 通过 export const声明一个箭头函数 在函数内部使用router传递数据和路径；并返回；然后再需要使用axios的地方调用这个函数，就可以了；
10.跨域
一、是jsonp
jsonp实现原理：主要是利用动态创建script标签请求后端接口地址，然后传递callback参数，后端接收callback，后端经过数据处理，返回callback函数调用的形式，callback中的参数就是json
二、是代理（前端代理和后端代理）
前端代理我在vue中主要是通过vue脚手架中的config中的index文件来配置的，其中有个proxy来配置跨域的 /ˈprɑːksi/
三、是CORS
CORS全称叫跨域资源共享，主要是后台工程师设置后端代码来达到前端跨域请求的

1.Redux中connect：
connect主要是把React 组件和redux中的store链接在一起；它不是改变原来的组件类；而是返回一个新的组件类；他有四个方法分别是；mapStateToProps,mapdispatchToProps,
mergePros,options
2.css盒模型：
盒模型就是把浏览器的标签看作一个个盒子 分别有 内容，边框，内边距和外边距四部分组成；
css有两种盒模型分别是IE盒模型和w3c盒模型；
IE盒模型和W3C盒模型的区别就是IE盒模型的内容包含了边框和内边距；而W3C没有包含；IE盒模型和W3C盒模型可以通过 box-sizing来改变其中border-box是IE盒模型content-box是W3C盒模型;
3.Position定位：
Position有四个属性分别是 static静态定位也就是默认的定位，relative相对定位它是相对于自身的定位,绝对定位absolute；它是相对于自己上级有定位的标签进行定位；fixed:固定定位：它是相对于浏览器进行的定位；
4.flex常用的属性：
flex-grow：它是用于设置当前弹性盒的扩展比例
flex-shrink:它是用于设置当前弹性盒的收缩比例 顺克
flex-basis: 它是用于是指弹性盒的默认大小
5.flex: 1所涉及到的属性 flex-grow:1,flex-shrink:1,flex-basis:0%;
6.判断变量a是数组：instanceof， isArray, constructor
7.Typeof输出值：undefined，number，object，string，boolean
8.Promise：
9.React生命周期：
10.React虚拟dom实现diff
11.Git常用命令：git add是把文件存到暂存区 git checkout 名称是跳转到当前分支
Git checkout -b 是创建一个新分支并跳转 Git commit -m 是将暂存区提供到仓库区
Git branch 显示本地所有分支 Git branch -r 显示所有远程分支；其实还有很多
12.继承：prototype = new A();
13.js异步机制：js是一门单线程的语言，任务一般是从上往下顺序执行，但是有些任务执行比较慢，比如网路请求，如果有太多的这中任务容易导致页面加载慢或卡死；所以浏览器为这些任务开出了新的线路这些任务是异步的。Js虽然是单线程但是他的宿主浏览器是多线程的；透过某种方式使js拥有了异步的属性

1.父组件调用子组件方法：
父组件可以通过ref来调用子组件中的方法 比如在子组件中声明ref = child;
那么我们可以在触发事件后 执行this.$refs…child.子组件的方法();
2.样式污染：因为vue中运行的载体是浏览器所以有些样式会通过style插入头部，影响全局，进行交叉感染；所以基本组件的style上添加scoped标识来进行区分；
3.Vue常用指令：v-if，v-for，v-bind：动态地绑定一个或多个特性
v-on：用于监听指定元素的DOM事件，比如点击事件。绑定事件监听器。
v-model：实现表单输入和应用状态之间的双向绑定
4.V-if和v-show的区别：v-if和v-show都是显示隐藏元素，但是他们是有区别的；例如：
V-if是惰性的；只要值是false就不会加载元素，只有为true时才动态加载；
而V-show无论true还是false都会加载元素 但是 但为false时 会添加 dispaly:none;来隐藏；
为true时会添加display：black来显示；
5.Created和mounted 区别:
created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
6.Hash 和 history的区别：最直观的区别就是在url中hash 带了一个的 # ，而history是没有#的。并且hash请求时是不带#号的；而hash也只能改变#后的内容;但是history可以随意改变url 但是当我们改变后进行刷新时，如果服务器中没有相应的响应或者资源，会刷出404来；
7.父组件往子组件传值：父组件往子组件传值是通过在调用子组件的标签上，例如我有一个子组件child 在里面传递一个:data = 4;在子组件中通过props获取到data的数据;
8.计算属性：computed 和 methods：如果作为模板的数据显示，二者能实现响应的功能，
computed 会基于响应数据缓存，methods不会缓存
9.Css3 动画效果：css3动画大致上包括两种：
第一种：过渡动画：主要通过transition来实现，通过设置过渡属性，运动时间，延迟时间和运动速度实现。
第二种：关键帧动画：主要通过animation配合@keyframes实现
transition动画和animation动画的主要区别有两点：
第一点transition动画需要事件来触发，animation不需要
10.第二点:transition只要开始结束两种状态，而animation可以实现多种状态，并且animation是可以做循环次数甚至是无限运动
11.移动端适配：@medio媒体查询 和 display:flex;
12.Less 和 sass：Sass和Less都属于Css预处理器，它们都可以混合和继承，但是它们的不同点是 less是基于script在客户端处理，但是sass是基于rubi在服务器处理
13.数组去重：我们可有使用 Array.from(new Set(数组))方法
14.css3 新特性：有圆角border-radius,盒阴影box-shadow，颜色 rgba还有动画；
15.Html5新特性：audio，video，语义化标签，增强型input标签像：color:颜色 time时间，
Number：输入数值，email输入邮箱等； localstorage和sessionStorage
16.vuex的理解：vuex是一个状态管理工具，主要是解决项目中数据共享问题，主要包括state,actions,mutations,getter,modules 五个元素，其中state是存储公共变量的地方，可以通过computed；来调用解析，mutations是存放同步事件的地方，他可以通过methods调用解析，而actions是存放异步操作的地方，在actions中声明的方法他的第一个参数使content,通过content.commit来调用mutations中存放的同步事件。Getter和state差不多，他是通过调用存放在state中的数据，然后把数据给包装后返回一个新的数据，并且不改变原来的数据。Modules可以让每一个模块都拥有自己的像state,actions，mutations,getter这样的元素；
17.Webpack的理解：webpack是一个模块化打包工具，vue就是使用webpack构建成的，webpack通过entry指定开口文件进行打包，通过output来指定输出的位置，但是webpack只能打包js文件，也就是说像css和less的这些文件都需要loader来进行转换，比如css文件就需要css-loader，和style-loader;less除了需要css和style外还需要less-loader来进行转换；当然本身还有一些内置的插件来对文件进行压缩合并等操作
18.Vue双向绑定：VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了get和set的操作来实现的。他有三个第一个参数：定义属性的对象。//第二个参数：要定义的属性的名称。//第三个参数：将被定义的属性描述符。
例如：let obj= {}，let name ; Object.defineProperty(obj, “data”, {//获取值get: function () {return name;},//设置值set: function (val) {name = val;console.log(val)}})//赋值调用set,obj.data = ‘aaa’;//取值调用get,console.log(obj.data);
19.微任务和宏任务：宏任务包括：整体代码script，setTimeout，setInterval，微任务包括：promise，process.nextTick；
20.JSON深拷贝有什么弊端：
1.如果obj里面有时间对象，则JSON.stringify后再JSON.parse的结果，时间将只是字符串的形式。而不是时间对象；
2.如果obj里面有NaN的话,只能得到一个null
3.如果obj里面存在构造函数生成的队象，那么obj中的构造函数就会消失
4.如果obj里面存在方法和undefined，那么obj中的方法和undefined就会消失；
21.图片上传时form中唯一参数：enctype必须是multipart/form-data。
22.请求超时后执行什么操作：
(1)再次发送请求
(2)刷新页面，再次点击，
(3)跳转到一个提示页面，再次点击 发送请求
23.如何自动刷新页面：location.reload();
24.Vue中data()为什么需要return：
当一个组件被定义， data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。
25.Promise的缺点：编写的难度比传统写法高，而且无法取消Promise。
26.清除浮动：
1.clear:both
2.overflow:hidden
27.mvvm和mvc的区别：
1.Mvvm 是 模型-视图-视图模型；模型是服务器数据，视图是前端的页面，视图模型就是连接视图和模型的桥梁；它有两个作用分别是：把模型转换为视图和把视图转换成模型；
2.Mvc是模型-视图-控制器：模型是服务器数据，视图是前端的页面，控制器就是把视图和模型分离，MVC是单向通信的；
28.路由的钩子函数：
全局: beforeEach，：每次路由跳转 next()通道，to:到达的路由，from:离开的路由
afterEach：每次路由跳转
局部：beforeRouteEnter，：进入本路由
beforeRouteUpdate，：离开本路由
beforeRouteLeave ：再本路由的下级路由切换
29.NextTick：vue中的nextTick主要用于处理数据动态变化后，DOM还未及时更新的问题，用nextTick就可以获取数据更新后最新DOM的变化
有时需要根据数据动态的为页面某些dom元素添加事件，这就要求在dom元素渲染完毕时去设置，但是created与mounted函数执行时一般dom并没有渲染完毕，所以就会出现获取不到，添加不了事件的问题，这回就要用到nextTick处理
30.keep-alive 组件的作用：主要用于保留组件状态或避免重新渲染。就好比我们有一个列表页面和详情页面，用户会经常点击列表页面和返回详情页面，那么就可以对列表组件使用keep-alive进行缓存，这样用户每次返回列表的时候，都能从缓存中快速渲染，而不是重新渲染。
31.原生ajax实行/交互原理：
(1)先创建XHR对象即XMLHttpRequest()
(2)然后open准备发送，open中有三个参数一是提交方式get和post,二是接口地址，三是同步和异步
(3)第三步是用send发送
(4)第四步再发送的过程中通过onreadystatechange来监听接收的回调函数，可以通过判断readyState＝＝4和status=＝200来判断是否成功返回，然后通过responseText接收成功返回的数据
32.语义化标签：语义化的标签，旨在让标签有自己的含义。比如p标签的含义就是一个段落，语义化标签的优势是:代码结构清晰，方便阅读，有利于团队合作开发。
33.技术难点：对于vue进行开发过程中的技术难点，我印象比较深刻的是对于组件插件的应用像ui库等，以及与后台对接时的第三方数据不是标准的json格式，这时候就需要我们对它有一个适用的解析，还有项目的业务逻辑的处理。
34.为什么推荐使用import：如果导入到 mymodule 中的模块里已经存在了__version__这一名称，那将产生冲突。这可能是因为每个模块通常都会使用这一名称来声明它们各自的版本号。因此，我们大都推荐最好去使用 import 语句
35.你们一般都是使用什么进行加密：aes进行加密;