Vue 面试题集合（一）

祭夜醉美

已于 2022-04-20 22:22:42 修改

阅读量582

点赞数

CC 4.0 BY-SA版权

分类专栏：前端求职文章标签：前端

于 2022-04-18 23:37:17 首次发布

本文链接：https://blog.csdn.net/qq_44665456/article/details/124257595

前端求职专栏收录该内容

50 篇文章

订阅专栏

一、让 CSS 只在当前组件生效

 <style scoped>

二、scss、stylus

> scss:
> 			1、下载:     npm install sass-loader node-sass   --save
> 			2、<style lang = 'scss' scoped>
> 			3、scss 样式穿透
> 					父元素 / deep / 子元素 
> stylus:
		1、下载： npm install stylus stylus-loader --save
		2、<style lang = "stylus" scpoed>
		3、stulus  样式穿透
				父元素 >>> 子元素

三、v-model 的使用

可以实现双向绑定，在 input 或者 select 或者文本域配合 value 使用

四、vue 中的标签如何绑定事件

v-on : click 简写： @click
绑定事件： <input @click = dogLog() />
在移动端 click 有 300ms延迟的问题，解决这个问题可以引入 fastClick
1、下载： npm install fastclick
2、引入：
import FastClick from ‘fastclick’
FastClick.attach (document.body)

五、vue-loader 是什么？使用它的作用是什么？

解析 .vue 文件的一个加载器，
用途：JS 可以写 ES6 、style样式、scss 样式、less、template可以加 jade等
ps:
项目打包： npm run build ------> index,html
开发的时候操作都是 xxx.vue 文件
loader: 加载器

六、NextTick 是做什么的

说明：
$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改之后使用 $nextTick,则可以在回调中获取更新后的 DOM
场景：
需要在视图更新之后，基于新的视图进行操作

七、Vue 组件 data 为什么必须是函数
不使用脚手架 vue.js

new Vue ({
	el:"#app",
	template:xxx
	data:{
	}
})

脚手架组件 data 为什么必须是函数？

因为 JS本身的特性带来的，如果 data 是一个对象，那么由于对象本身属于引用类型，当我们修改其中一个属性时，会影响到所有 Vue 实例的数据。如果将 data 作为一个函数返回一个对象，那么每一个实例的 data 属性都是独立的，不会互相影响了

七、对 keep-alive 的了解

1、keep - allve 是什么？
内置组件，能在组件切换过程将状态保留在内存中，防止重复渲染 dom
2、说明：
keep - alive 它不会在 DOM 树中渲染
3、使用场景：几乎和渲染有关系
4、多2生命周期
activated、deactivated

八、Vue 的双向数据绑定原理的作用？

总结： Vue 数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的
1、为什么会多出这两个方法呢？
因为 vue是通过 Object.definedProperty() 来实现数据劫持的
2、Oject.definedProperty () 是用来做什么的
它可以来控制一个对象属性的一些特有操作，比如读写权、是否可以枚举，这里我们主要先来研究下它对应的两个描述属性 get 和 set.

Object.defineProperty(对象，属性，{
	get(){}
	set(){}
})

九、在 Vue 中使用插件的步骤

1、下载
npm install xx
2、引入
import xx from ‘xx’
Vue.use(xx);
3、配置
<xx
v-model = ‘0’
selectedid = ‘0’

十、watch 和 computed 差异

computed : 计算属性
1、计算属性是由 data 中的已知值，得到一个新的值
2、性能不好
3、别人变化影响我
watch : 监听数据的变化
1、监听 data 中的数据
2、我的变化影响别人

十一、你们 Vue 项目是打包一个JS 文件，一个CSS文件，还是有多个文件

根据 vue-cli 脚手架规范，一个 JS 文件，一个 CSS 文件
在打包之前
1、代理的 url
2、build
assetsPublicPath: ‘./’
十二、Vue-cli 项目中 src 目录中每个文件夹和文件的用法？
src
assets : 静态资源（图片、JS、CSS ）
components : 非路由组件
views : 路由组件
router : 路由配置
store : vuex （仓库）
App.vue : 挂载的第一个组件
main.js : 全局的文件

十三、axios 是什么？怎么使用？ Vue 跨域请求接口代理方法

1、axios 是什么？怎么使用
a.下载
npm install axios --save
b.引入（main.js）
import axios from ‘axios’
Vue.prototype.axios = axios
c.请求方式，以及传递参数
axios.get(‘/api’login?userName = ??? &userPwd = ???’)
axios.post(‘/api/login’,{
userName:??,userPws:???
})
2、设置代理，请求接口（跨域）

config/index.js
	proxyTable:{
		'api':{
			target:"http://localhost:8080/",
			changeOrigin:true,
			pathRewrite:{
					'^/api"''static/mock'
			}
		}
	},

修改了webpack 的配置，一定要重启一下服务

十四、Vue 生命周期

1、有哪些（2+）
beforeCreate、created
beforeMount、mounted
beforeUpdate、updated
beforeDestory、destroyed
------------------- 使用 keep -lalive 就会多两个生命周期
activated、deactivated
2、生命周期的理解
总共分为： 8个阶段
创建前、后
beforeCreate : Vue 实例的挂载元素 $el 和数据对象 data 都为undifined ，还为初始化
created : Vue 实例的数据对象 data 有了，但是 $el 是没有
载入前、后
beforeMount： vue 实例的 $el 和 data都初始化了，但是挂载之前为虚拟dom结点，data.msg还未替换
mounted: vue实例挂载完成，data.msg 成功渲染
更新前、后
当 data 变化时，会触发：beforeUpdate、updated
销毁前、后：
当销毁的时候，会触发: beforeDestory、destroyed
3、DOM 渲染在哪个生命周期就已经完成？ mounted

十五、单页面应用的优缺点

优点：
1、用户体验和，快，内容的改变不需要重新加载整个页面，基于这一点 spa 对服务器压力较小
2、前后端分离
3、页面效果会比较炫酷，（比如切换页面内容时的专场动画）
缺点：
1、不利于 SEO 优化
2、导航不可用，如果一定要导航需要自行实现前进、后退。（由于单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）
3、初次加载时耗时多
4、页面复杂度提高很多

十六、什么是Vuex

Vuex 为状态管理，它集中存储管理应用的所有组件的状态，可以理解成一个全局仓库

十七、为什么通过 Vuex 的 motution 修改 state 中的参数就不会报错，而直接更改 state 中的参数就会报错
十八、使用 Vuex 只需要 Vue.use(Vuex),并在 Vue 的配置中传入一个 store 对象的实例， store 是如何实现注入的?

Vue.use(Vuex) 方法执行的是 install 方法，它实现了 Vue 实例对象 init 方法封装和注入，使传入的 store 对象被设置到 Vue 上下文环境的 store 中，因此在 VueComponent 任意地方都能够通过 this.store 访问到该 store

十九、Vuex 原理

1、Vuex 其实是一个 Vue 的插件，高度依赖 Vue.js
2、vue 插件都需要一个 Install 方法，install 方法调用了 applyMixin ，该方法主要是在所有组件中的 beforeCreate 中注入了 this.$store 对象，
3、vue 自身的响应式设计，依赖监听，依赖收集都属于， vue 对象，Property set get 方法的代理劫持
Vuex 的属性： State、Getter、Mutation、Action、Module

二十、对比 jQuery 和 Vue 有什么不同？