vue前台面试题有哪些

这篇文章主要介绍“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://scyanting.com/article/jjgpoc.html