13518219792
这篇文章主要介绍“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前台面试题有哪些”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！
