这篇文章主要介绍“vue前台面试题有哪些”，在日常操作中，相信很多人在vue前台面试题有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue前台面试题有哪些”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

成都创新互联专注为客户提供全方位的互联网综合服务，包含不限于成都网站制作、网站建设、环县网络推广、小程序制作、环县网络营销、环县企业策划、环县品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；成都创新互联为所有大学生创业者提供环县建站搭建服务，24小时服务热线：18982081108，官方网址：www.cdcxhl.com

1.vue性能优化的几种方案

1.正确的选择v-if和v-show的使用，v-if有更高的切换消耗，v-show有更高的初始消耗

2.路由懒加载：当页面很多，组件很多的时候，SPA页面在初次加载的时候，就会变的很慢。这是由于vue初次加载的时候把可能一开始看不见的组件也一次加载了，这个时候就需要对页面进行优化，就需要异步组件了。

3.缓存：spa页面采用keep-alive缓存组件

4.图片懒加载：提高页面加载速度，不在可视区域内的图片先不加载，只有滚动到可视区域的时候才加载。一般借助外部插件如 vue-lazyload。使用只要要npm install vue-lazyload而后页面引入即用。

5.SEO优化： ssr服务端渲染

6.打包优化：对于少量过大的包采取cdn引入文件的方式而不是直接下载到本地。

2.v-show和v-if谁的性能更高

v-show本质就是通过控制css中的display设置为none，控制隐藏，只会编译⼀次；v-if是动态的向DOM树内增加或者者删除DOM元素，若初始值为false，就不会编译了。⽽且v-if不停的销毁和创立⽐较消耗性能。所以假如要频繁切换那么v-show性能更高，假如不是频繁切换，v-if性能更高

3.vue之间的数据传递

父到子：props

子到父：$emit自己设置事件

复杂组件的传递：通过vuex

4.单文件组件中如何让样式只在当前组件生效

在组件中的style前面加上scoped

5.vue中的生命周期（钩子函数）

共有8+2个钩子函数 基本的有8个，keep-alive中有2个

beforeCreate（创立前） / created（创立后） / beforeMount（挂载前） / mounted（挂载后） beforeUpdate（升级前）/ updated（升级后） /beforeDestroy（销毁前）/ destroyed（销毁后）

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

另外在keep-alive中，vue新添加了两个钩子函数

activated：由于使用了keep-alive的组件会被缓存，所以created,mounted这种的钩子函数只会执行一次， 假如我们的子组件需要在每次加载的时候进行某些操作，可以使用activated钩子触发。

deactivated：组件被移除时使用。

6.vue父子组件生命周期的执行顺序

加载渲染过程

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

子组件升级过程

父beforeUpdate->子beforeUpdate->子updated->父updated

父组件升级过程

父beforeUpdate->父updated

销毁过程

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

7.在vue中如何获取DOM元素

给元素增加ref属性 通过this.$refs.domName获取

8.key的作用

需要使用key来给每个节点做一个唯一标识，Diff算法即可以正确的识别此节点。

作用主要是为了高效的升级虚拟DOM。

9.$nextTick的使用场景（作用）

由于vue中数据升级是异步的，当你修改了data的值而后马上获取这个dom元素的值，是不能获取到升级后的值，

你需要使用$nextTick这个回调，让修改后的data值渲染升级到dom元素之后在获取，才能成功。

10.v-if和v-for的优先级

v-if 与 v-for 一起使用时，v-for 具备比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中。所以，不推荐v-if和v-for同时使用。假如非要一起用，可以把v-if放到外层元素，或者者不用v-if，先在计算属性中挑选出数据，而后在v-for

11.v-model的原理

vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；

核心：关于VUE双向数据绑定，其核心是 Object.defineProperty()方法。

12.什么是mvvm

MVVM 将数据双向绑定（data-binding）作为核心思想，View 和 Model 之间没有联络，它们通过 ViewModel 这个桥梁进行交互。

Model 和 ViewModel 之间的交互是双向的，因而 View 的变化会自动同步到 Model，而 Model 变化也会立即反映到 View 上显示。

当客户操作 View，ViewModel 感知到变化，而后通知 Model 发生相应改变；反之当 Model 发生改变，ViewModel 也能感知到变化，使 View 作出相应升级。

13.如何优化SPA应用的首屏加载速度慢的问题

将公用的JS库通过script标签外部引入，减小app.bundel的大小，让浏览器并行下载资源文件，提高下载速度；

在配置 路由时，页面和组件使用懒加载的方式引入，进一步缩小 app.bundel 的体积，在调用某个组件时再加载对应的js文件；

加一个首屏 loading 图，提升客户体验；

14.vue路由的两种模式，hash与history的区别

hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。

比方这个 URL：ABC Home Page - ABC.com 的值为 #/hello。它的特点在于：hash 尽管出现在 URL 中，但不会被包括在 HTTP 请求中，对后台完全没有影响，因而改变 hash 不会重新加载页面。

history —— 利用了 HTML5 History Interface 中新添加的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）

这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的 功能。只是当它们执行修改时，尽管改变了当前的 URL，但浏览器不会立即向后台发送请求。

因而可以说，hash 模式和 history 模式都属于浏览器自身的特性，Vue-Router 只是利用了这两个特性（通过调用浏览器提供 的接口）来实现前台路由。

注意！！！history模式下，前台的url必需和实际向后台发起请求的url 一致，如http://www.abc.com/book/id 。假如后台缺少对/book/id 的路由解决，将返回404错误。刷新也会报404由于会实际去请求数据。 （需要后台进行配置。vue官网有详情）

15.如何处理vuex数据刷新丢失的问题

由于store里的数据是保存在运行内存中的,当页面刷新时，页面会重新加载vue实例，store里面的数据就会被重新赋值

如何处理：

一种是state里的数据一律是通过请求来触发action或者mutation来改变(不推荐，当vuex数据很多项目很大的时候不适用)

一种是将state里的数据保存一份到本地存储(localStorage、sessionStorage、cookie）中 （推荐）

16.vue中如何实现跨域访问

1.开发环境：配置vue.config.js proxy代理商

2.生产环境：配置nginx代理商

到此，关于“vue前台面试题有哪些”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！

网站栏目：vue前台面试题有哪些
标题路径：http://azwzsj.com/article/jjgpoc.html