vue面试题

最新推荐文章于 2023-03-10 14:16:22 发布

原创最新推荐文章于 2023-03-10 14:16:22 发布 · 274 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue面试题 #前端面试题

前端面试题专栏收录该内容

1 篇文章

订阅专栏

本文详细梳理了Vue面试中常见的问题，包括rem换算原理、路由懒加载、移动端300毫秒延迟处理、生产与开发模式区别、路由模式、参数传递、Git操作、组件通信、Vuex模块及辅助函数等核心知识点，帮助读者深入理解Vue的实战技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue面试题和答案

1、rem 换算原理

我通常会写一个js文件，在这个文件中，当浏览器尺寸变化的时候，window.onresize事件会，根据浏览器的宽
来计算fontSize的值 clientWidth/一个值来确定fontsize 的大小 fontsize的大小就是1rem的值
屏幕越大，fontsize越大，1rem 的值也越大，这样就做到了一个等比例的适配。

2、路由懒加载（按需／异步加载）

开发时，项目最后打包会变得非常大，影响页面加载，特别是首页加载速度。
这个时候把不同路由对应的组件分割成不同的代码然后当路由被访问的时候才加载对应组件，这样就更加高效了。
方式一：const Foo = () => import(’./Foo.vue’)；
方式二：const home = r => require.ensure([], () => r(require(’…/page/home/home’)), ‘home’)；

3、移动端页面300毫秒延迟处理

FastClick 是 FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。FastClick的实现原理是在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后的click事件阻止掉。

vue项目中安装 FastClick插件取消300毫秒延迟事件
if (‘addEventListener’ in document) {
document.addEventListener(‘DOMContentLoaded’, function() {
FastClick.attach(document.body);
}, false);
}

4、生产模式，开发模式有什么不同？

生产模式，开发模式的ip地址，服务器路径，图片路径，路由模式会有不同

5、如何判断是生产模式还是开发模式？

通过判断：process.env.NODE_ENV的值
如果＝＝development 属于开发模式
如果＝＝production 属于生产模式
然后根据不同的模式，导出routerMode,baseUrl,imgBaseUrl 这些路径

6、vue 路由模式
路由模式分为两种history 和hash
hash —— 即地址栏 URL 中的 # 符号
特点:hash虽然出现在 URL 中，但不会被包括在HTTP 请求中，对后端完全没影响，
因此改变hash不会重新加载页面。
history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。
它们提供了对历史记录进行修改的功能。当它们执行修改时，虽然改变了当前的 URL，
但浏览器不会立即向后端发送请求。

7、vue 路由传参数 params 和query的区别

params 传参数语法：this. $router.push({name:'cs', params:{geohash:geohash}}) 必须使用name 传递接收参数语法：this.$ route.params.路由参数名

query  传参数语法：this.$router.push({path:'/cs', query:{geohash:geohash}}) 
       接受参数语法：this.$route.query.路由参数名

1、params是路由的一部分,必须要在路由后面添加参数名。 query是拼接在url后面的参数，不用设置参数名。
2、params一旦设置在路由，params就是路由的一部分，如果这个路由有params传参，但是在跳转的时候没有传这个参数，会导致跳转失败或者页面会没有内容。
3、:to='/city/+item.id 这种拼接的方式  属于params传参数 

$route 与$router 的区别
$route 是只读，获取路由对象信息的时候使用
$router 是操作路由跳转的时候使用

8、什么是git？有哪些常用指令？

git是状态管理系统分为两种本地仓库和远程仓库
当使用本地仓库时使用git init 创建个仓库，把想管理的项目和文件通过git add 文件名储存到我们的暂存区
通过git commit 添加到本地仓库中，每添加一次就产生一个新的版本，多个版本是时候有利于我们管理，
通过git reset --hard 版本id可以跳到这个版本;

9、如何将本地git 提交到远程仓库？写出具体操作指令

1、通过git init创建git仓库
2、通过git remote add origin 地址添加上传地址
3、把要上传的项目 git add 文件名保存在暂存区
4、通过 git commit 提交到本地仓库
5、使用git pull origin master 同步到远程仓库
6、通过git push -u origin master 提交

10、git如何解决本地冲突，和远程提交冲突。

本地仓库有的时候合并的时候会冲突；远程仓库在git pull origin master时候会产生冲突。
这个时候我选择使用编辑器中的终端中使用git指令操作；
会有几个选项；这个时候如果冲突了我可以手动去选择是都保留还是保留其中一个

11、路由跳转有几种方式
router-view 实现路由内容的地方，引入组件时写到需要引入的地方
需要注意的是，使用vue-router控制路由则必须router-view作为容器。
router-link是路由跳转最基本的方式，浏览器在解析是把它解析成为a标签，需要在router文件中index.js中引入规则
1.router-link:<router-link to='需要跳转到的页面的路径>

2.this. $router.push({ path:’/user’})常用于路由传参，实现携带参数的跳转常用语路有传参， query的引入方式，params只能用name来引入路由，而query 要用path引入 query的传递方式类似于我们ajax中get传参，在浏览器地址栏中显示参数，params则类似于post，在浏览器地址栏中不显示参数 3.this.$ router.replace{path：‘/’ }
4.this.$router.go(-1)

12、组件通信－父传子，子传父，兄弟如何实现，（写出关键代码）

父传子：
1、在父组件中给子组件的标签绑定一个属性，属性上挂载需要传输的变量

2、在子组件中通过props:[‘自定义属性’]来接收这个数据
3、数据可以直接使用了接的什么就使用什么

	子传父：(在子组件中调用父组件的方法)

	在子组件中调用父组件的方法

	1、在父组件上的子组件标签绑定一个自定义事件  给这个事件挂载需要调用的方法
	2、在子组件的方法中通过this.$emit("自定义事件名")来调用这个方法，如果父组件的方法中有参数 那么$emit第二个参数的位置就是我们要传递的参数

	子传父的本质就是调用父组件的方法  然后把值当成实参给父组件传递

	兄弟组件传值
	方式1：
	先子传父，然后再父传子

	方式2：（中央通信bus）数据从组件A传输到组件B
		1、创建一个空的vue实例来担任总线的位置

		2、把总线引入到组件A中
			然后再组件方法中通过派发事件 来发送数据
			Bus.$emit("事件名","消息")

		3、把总线引入到组件B中
			在钩子函数created中来监听来自A的事件
			bus.$on("事件名",(参数)=>{
				then挂载的从A过来的数据	
			})

13、props 如何做类型验证

props 是父组件用来传递数据的一个自定义属性。父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props
类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件：
props 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。

props 是一个对象而不是字符串数组时，它包含验证要求：
验证的type类型可以是：

String

Number

Boolean

Object

Array

Function

type也可以是一个自定义构造器，使用instanceof检测。
props:{
a:nummber,
b:[string,number]
}

14、什么是solt 如何使用，具名插槽如何使用？

插槽内可以是任意内容。

如果现在事先模板中不知道需要什么内容,需要在使用时传递
就可以使用插槽with来实现,这种效果! 类似ThinkPHP中的模板继承
的block 标签的功能
匿名插槽顾名思义就是没有名字的插槽, 匿名插槽只能有一个，多的话就会乱
实名插槽可以有多个,在使用时必须使用name属性来标识
插槽可以设置默认值,定义了不使用就会使用默认值,
如果没有名字的标签的标签默认会放到default(即匿名插槽)

15、vuex中有哪些属性，各自的作用是什
状态管理模式，多个组件之间的数据共享
state
数据的声明，使用数据时 this.$store.state.变量名

mutations
处理state中数据的操作方法，在某个组件中使用 this.$store.commit(‘方法名’,参数)
getters
相当于state的计算属性，把state中的变量，二次处理，返回一个新的值。

actons
处理state中数据的操作方法，里面可以写异步操作使用 this.$store.dispatch(‘方法名’，参数)
在action中异步处理结束之后，在通过context.commit(‘mutations中的方法名’)

modules
模块化，把项目中的多个业务逻辑，封装成多个文件在通过 modules 引入
在每个引入的模块文件中添加命名空间 namespaced: true
使用某个模块的方法时， this.$store.getters[‘shopcar/getN’]
使用mapGetters/mapActions/… …mapGetters({
‘getN’:‘shopcar/getN’
})

plugins
是插件比如说 vuex结合本地存储 vuex-persist

16、什么是辅助函数？如何使用（关键代码）

在使用vuex过程中，业务功能逐渐增加，会出现很多个状态。当一个组件需要多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。
vuex提供了一些非常方便的辅助函数，比如mapState、mapGetter、mapMutation、mapAction。
mapState 把vuex store中的数据直接映射到vue实例中 …mapState([‘变量名’])

mapGetters  把vuex中的 getters中的方法直接映射到vue实例中  this.方法名

mapActions   把vuex中的 mapActions中的方法直接映射到vue实例中

mapMutations  把vuex中的 mapMutations中的方法直接映射到vue实例中

17、 post 请求 content-type类型有哪些，作用是什么？

1、application/json json格式数据
2、multipart/form-data 上传文件／图片

  如何上传图片？ 
    1、修改post请求头headers 的 content-type 类型 为multipart/form-data
    2、使用 formData.append('file',文件)

18 vue获取dom的方式

1.在标签上加ref=‘dom’,通过this.$refs.dom拿到页面元素
2.通过document.getElementById()方法来获取

19、$nextTick
是在vue组件dom元素渲染完成的时候调用

答：是在下次DOM更新循环结束之后实现延迟回调，在修改数据之后，使用 $n e x t t i c k, 则可以在回调中获取更新后的 D O M t h i s .$ nextTick
（vue响应的改变一个值后，此时的dom并不会立即更新，如果数据需要在数据改变以后，立即通过dom做一些操作，可以使用$nexttick获取更新后的dom）

20、keep-alive的作用，何时使用？
keep-alive是Vue.js的一个内置组件。它能够不活动的组件实例保存在内存中，而不是直接将其销毁，它是一个抽象组件，不会被渲染到真实DOM中，也不会出现在父组件链中。
它提供了include与exclude两个属性，允许组件有条件地进行缓存。

keep-alive组件提供了include（包括）与exclude（不包括）两个属性来允许组件有条件地进行缓存，二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。

keep-alive提供了两个生命钩子，分别是activated与deactivated。
因为keep-alive会将组件保存在内存中，并不会销毁以及重新创建，所以不会重新调用组件的created等方法，需要用activated与deactivated这两个生命钩子来得知当前组件是否处于活动状态。

作用就是缓存组件,使用某个组件时，通过keep-alive 组件包裹即可
如果是路由组件，我通常会给路由设置一个meta属性如果这个属性是true 我就让 router-view 被keep-alive包裹

21、生命周期有哪些，各自的使
beforecreate : el（dom结构）和 data（数据）并未初始化
举个栗子：不做逻辑处理

created ：完成了 data 数据的初始化，el没有

beforeMount:挂在之前

mounted ：完成了 el 和 data 初始化，并且挂在完成
在这发起后端 ajax请求，拿回数据
beforUpdate:数据更新前

updated:数据更新完成
栗子：获得v-for渲染的每个li的高度，这个li是后添加到页面的，所以需要在updated中获得。

beforeDestroy：组件销毁前，比如组件使用v-if被隐藏，会调用。
栗子：当移除组件时。你确认删除XX吗？

destroyed ：当前组件已被删除，清空相关内容，比如说，定时器，和滚动事件。

activated : 使用了keepalive 缓存的组件被激活。

deactivated : 使用了keepalive 缓存的组件被移除。