vue前端面试题（全）带答案

如何全局统一处理后端的返回报错或者网络问题

修改axios的响应拦截器interceptors 【axios.interceptors.response.use】

1、axios的特点有哪些？

一、Axios 是一个基于 promise 的 HTTP 库，支持promise所有的API

二、它可以拦截请求和响应

三、它可以转换请求数据和响应数据，并对响应回来的内容自动转换成 JSON类型的数据

四、安全性更高，客户端支持防御 XSRF

2、axios有哪些常用方法？

一、axios.get(url[, config])   //get请求用于列表和信息查询

二、axios.delete(url[, config])  //删除

三、axios.post(url[, data[, config]])  //post请求用于信息的添加

四、axios.put(url[, data[, config]])  //更新操作

Head  HEAD请求只返回响应头信息，不返回实际的响应主体

3、说下你了解的axios相关配置属性？

Url：用于请求的服务器URL

Method：创建请求时使用的方法,默认是get

baseURL：将自动加在url前面，除非url是一个绝对URL。它可以通过设置一个baseURL便于为axios实例的方法传递相对URL

transformRequest：允许在向服务器发送前，修改请求数据，只能用在'PUT','POST'和'PATCH'这几个请求方法

headers：自定义请求头     eg: {'X-Requested-With':'XMLHttpRequest'},

params：URL参数，必须是一个无格式对象(plainobject)或URLSearchParams对象；所谓的无格式的对象就是属性值皆为字符串的对象

Auth：表示应该使用HTTP基础验证，并提供凭据

Proxy：代理服务器的主机名称和端口

axios原理

createInstance底层根据默认设置 新建一个Axios对象，所有的请求内部调用的都是Axios.prototype.request,将prototype.request的内部this绑定到新建的Axios对象上,从而形成一个axios实例。新建Axios对象时，会有两个拦截器，request拦截器，response拦截器。

request拦截器是在请求发送前进行一些操作，比如统一添加token

axios.interceptors.request.use(function (config) {

    // 在发送请求之前做些什么，例如加入token

    .......

    return config;

  }, function (error) {

    // 对请求错误做些什么

    return Promise.reject(error);

  });

response拦截器是在接收到响应后进行一些操作，比如登录失效跳转到登录页。

axios.interceptors.response.use(function (response) {

    // 在接收响应做些什么，例如跳转到登录页

    ......

    return response;

  }, function (error) {

    // 对响应错误做点什么

    return Promise.reject(error);

  });

隐藏页面某个元素的方法

v-if     v-show

v-show不管条件真假，第一次渲染的时候都会编译出来，添加到DOM中。之后切换的时候，通过display: none;样式来控制显隐。只改变css的样式，几乎不会影响什么性能

v-if 通过动态地向 DOM 树内添加或删除 DOM 元素来实现内容的显隐。在首次渲染的时候，如果条件不成立，那么页面上没有这些元素。当条件成立的时候，开始局部编译，动态的向DOM元素里面添加元素。当条件从真变为假的时候，开始局部编译，删除这些元素。

`v-if` 有较高的切换消耗，适合用于条件不经常变化的场景，

`v-show` 有较高的初始渲染消耗* 适合于需要频繁切换显隐的场景

计算属性compute，watch 区别

`computed`适合于计算依赖多个数据属性的复杂属性值，基于响应式依赖进行缓存，只在相关响应式依赖发生改变时才会重新求值，不支持异步。适用于多个数据改变影响一个数据值的情况

计算属性默认只有 getter，所以只能取值,不能赋值,如果想要修改计算属性 那就自己实现setter方法。

`watch`适合于监听数据属性，并在数据变化时执行操作，支持异步，不支持缓存。`watch`选项中的函数有两个参数，第一个是最新的值，第二个参数是输入之前的值，顺序是新值，旧值。适用于一个数据改变影响多个数据的情况

iframe内外部交互的方式

1.从vue到iframe的信息传递：

使用window.postMessage，：在Vue组件中使用window.postMessage‘发送消息，iframe中通过监听‘message'事件接收消息。

Vue组件内嵌iframe：

将iframe作为vue组件的一部分，通过props或其他方式将数据传递给iframe。

通过eventbus，使用$emit触发事件，iframe中通过$on监听事件。

2.从iframe到Vue的信息传递：

使用window.postMessage，在iframe中使用window.parent.postMessage发送消息。在vue中通过监听message接收。

window.addEventListener:在vue应用中通过 window.addEventListener’监听全局事件。在iframe中通过 window.top.dispatchEvent•触发全局事件，从而与Vue通信。

注意事项：

安全性：在进行跨域通信时，需要确保安全性。使用^postMessage^时，可以通过设置目标域的白名单来限制消息发送的目标。

iframe加载完成：确保iframe已经加载完成再进行通信，可以使用 1oad〝事件或者iframe .onload^回调。

跨域限制：如果Vue应用和ifrarme不在同一个域下，需要确保在iframe的响应头中包含"Access-Control-Allow-Origin'.

Vue 子组件和父组件生命周期钩子函数执行顺序

组件的调用顺序都是先父后子,渲染完成的顺序是先子后父。

组件的销毁操作是先父后子，销毁完成的顺序是先子后父。

加载渲染过程：

1.父组件 beforeCreate

2.父组件 created

3.父组件 beforeMount

4.子组件 beforeCreate

5.子组件 created

6.子组件 beforeMount

7.子组件mounted

8. 父组件 mounted

更新过程：

1.父组件 beforeUpdate

2.子组件 beforeUpdate

3.子组件 updated

4.父组件 updated

销毁过程：

1.父组件 beforeDestroy

2.子组件 beforeDestroy

3.子组件 destroyed

4.父组件 destoryed

created：已创建 //已创建，在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

Mounted：渲染完成 //已挂载，在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些操作。

Updated 数据更新 //在实例更新完成后被调用，此时实例的数据已经重新渲染到DOM上。可以在这个阶段对DOM进行操作，但要避免无限循环的更新。

beforeDestroyed ：即将销毁 //即将执行销毁过程，一般在此阶段停止定时器、取消eventbus等操作

Vue2中父子组件传值方式，兄弟组件传值方式

父传子：子组件通过props的方式来接收父组件传递过来的数据；注意props是单向的，你无法改变父组件的值，可以在data()里重新定义一个变量），把props赋值给它。

使用ref，给子组件定义一个ID，父组件通过这个ID可以直接访问子组件里面的方法和属性；

加上.sync 表示双向绑定，实际上是监听 属性的同时 监听update的事件 回传数据修改属性的值

子传父：子组件调用$emit向父组件传递事件并携带参数，父组件使用事件接收；

兄弟传递：可以使用 eventBus，eventbus.$emit()  eventbus.$on；eventbus.$off移除

以上所有组件间的传值都可以使用 vue的状态管理来实现（vuex），但是此方法不建议使用

v-model原理

v-model 是 Vue 的语法糖，用于简化表单元素和数据之间的双向绑定。实际上是将 :value 和 @input 绑定的细节封装起来，使得双向绑定变得更加简洁和易读。

v-model有局限性，绑定的属性名只能叫value

总结一下，v-model 的原理包括两个方面：

1.属性绑定： 将表单元素的值与 Vue 实例中的数据绑定，确保显示的值与数据同步。

2.事件监听： 监听表单元素的输入事件变化时，通过该事件将新值赋给 Vue 实例中的数据。

vue跨域解决方式

开发中

1、前端在vue.config中配置代理，proxy中的target地址

2、后端配置cors； Access-Control-Allow-Origin*

部署后  使用ngnix进行转发

vuex中存储的数据，刷新页面后导致数据丢失，如何解决

原因

刷新页面时，vue实例重新加载，导致store被重置

store是存储组件状态的，但不是本地数据存储，如果不希望被重置可以用本地存储

sessionStorage/localStorage

监听页面是否刷新，如果页面刷新了，将state对象存入到localStorage中。

页面打开之后，判断localStorage中是否存在state对象，如果存在，则说明页面是被刷新过的，将localStorage中存的数据取出来给vuex中的state赋值。如果不存在，说明是第一次打开，则取vuex中定义的state初始值。

第三方插件

vuex-persistedstate

vuex-persistedstate：在页面重新加载之间保持并重新补充Vuex状态

四、补充

cookie： 不适合存储较大的数据 （一段不超过4KB的小型文本数据）

localStorage： 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除（永久存储）

sessionStorage： 临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据（推荐）

cookie可设置失效时间，默认为关闭浏览器后失效

localStorage除非手动清除，否则永久有效

sessionStorage仅在当前网页会话下有效，关闭页面或浏览器后就会被清除

cookie区分域，不区分端口，同ip下的不同端口cookie是共享的，sessionStorage和localStorage不可共享

VUE浅拷贝和深拷贝实现方式

1.Object.assign()-----将一个或多个对象复制到目标对象

  单级结构时深拷贝，多级结构浅拷贝，Object.assign()对象是用于将所有可枚举属性的值从一个或多个源对象复制到目标对象，将返回目标对象。

2.concat()-----连接两个或多个数组

单级结构时深拷贝，多级结构浅拷贝

3.slice()-----从已有的数组中返回选定的元素

单级结构时深拷贝，多级结构浅拷贝

4.JSON.parse(JSON.stringify()) (一定是深拷贝，常用)

  用JSON.stringify将对象转成JSON字符串，再用JSON.parse()把字符串解析成对象，一去一来，新的对象产生了，而且对象会开辟新的栈，实现深拷贝

5.cloneDeep() （第三方js工具库lodash，封装了常用的工具方法，跟面试官说你在开发中常用这个库）

单级多级均为深拷贝，使用lodash工具中cloneDeep方法实现深拷贝，需要通过npm引入lodash库

Vue中 keep-alive

keep-alive  Vue 的内置组件，用它包裹动态组件时，会缓存不活动的组件，而不是销毁。

它是一个抽象组件，不会被渲染成 DOM 元素

作用是  在组件切换过程中，防止重复渲染DOM

原理： 在 created 函数调用时将需要缓存的 VNode 节点保存在 this.cache 中／在 页面渲染 时，如果 VNode 的 name 符合缓存条件（可以用 include 以及 exclude 控制），则会从 this.cache 中取出之前缓存的 VNode 实例进行渲染。

（VNode：虚拟DOM，其实就是一个JS对象）

< keep-alive > 会将数据保留在内存中，进入页面时调用 activated，代替原本的created钩子

被包含在 < keep-alive > 中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated

activated：在组件被激活时调用，在组件第一次渲染时也会被调用，之后每次keep-alive激活时被调用。

deactivated：在组件被停用时调用。

注意： 在 2.1.0 版本之后，使用 exclude 排除之后，就算被包裹在 keep-alive 中，这两个钩子依然不会被调用！另外在服务端渲染时此钩子也不会被调用的。

页面第一次进入，钩子的触发顺序 created -> mounted -> activated，退出时触发 deactivated。

当再次进入（前进或者后退）时，只触发 activated。

npm6和npm8对于peer deps处理方式的差异

peerDependencies的目的是提示安装满足插件peerDependencies所指定依赖的包，然后在插件import或者require所依赖的包的时候，永远都是引用统一安装的npm包，最终解决插件与所依赖包不一致的问题。

跨域时浏览器发送的预检请求的请求方法和请求中常见的属性

当发起跨域请求的时候，会在正式请求之前先发起options请求，也就是cors预检请求，如果服务器接受，浏览器才会发起正式请求

Access-control-request-method 实际请求将使用的方法

Access-control-request-headers 实际请求携带的头信息

Access-control-allow-method 服务器允许的请求方法

Access-control-allow-origin 允许跨域请求的域名

Access-control—allow-headers 允许实际请求携带的header

Access-control-max-age 预检请求结果的缓存时间

介绍一个了解的微前端框架并说明其优缺点 

微前端用通俗易懂的话来说就是：一个主应用（基座）中可以搭建多个子应用（微应用），这些子应用可以是不同版本，不同前端框架，而且跟主应用的语言无关，主应用仅仅是一个基座。

microapp qiankun

qiankun 蚂蚁金服的微前端框架，体积稍大，加载性能方面可能稍有影响，

microapp 京东出品，基于web component原生组件渲染，从组件化的思维实现微前端

接入成本最低，无关技术栈，样式隔离，js沙箱，静态资源补全

展示pdf(pdf只预览不下载) 

转成图片展示、用KKFile这个服务展示

表格列特别多怎么办  

虚拟列、减少渲染的字符数量  三方插件vxe-table

node多版本切换  尤其是node-sass的版本对应

n管理，比nvm好用

nodesass版本不符怎么办，先删除sass-loader再删除node-sass，之后安装对应版本就好了

依赖版本升级了怎么办 

去掉 版本通配符 ^和~ 固定下来版本

x.y.z  x主版本 y副版本 z补丁版本

^更新副版本，比如^1.0.1，就是更新到1.x的最新版本

~更新补丁，比如~1.0.1，就是更新到1.0的最新版本

两个组件的依赖冲突了怎么办      

看这个组件是否有 和现有组件 依赖的冲突， 如果有用install --force解决

返回页面变成空白了  

keep-alive问题

浏览器兼容性问题

兼容工具：postcss等

使用babel，但是babel不转换新的api，比如Promise，所以引入core-js来解决（core-js包含了babel-polyfill）。

babel是一个js编译器

nodejs版本升级注意事项

确保node跟项目的依赖兼容，若不兼容，可以尝试更新依赖版本，逐步升级。

第一个项目(之前说的或者简历中)的技术栈是什么，自己认为比较好的技术栈

uniapp

项目上有没有难点的问题，如何解决的

由于之前的业务相对常规，没有遇到过大的困难，但是也比较期待再今后工作中遇到一些难题，因为这样才会有成长。

IT项目开发管理说明，通过哪些工具

禅道、jira