VUE面试题（持续更新）

怎么就

已于 2022-08-30 17:59:33 修改

阅读量704

点赞数 4

分类专栏： vue学习文章标签： vue.js 前端 javascript

于 2022-02-12 18:27:04 首次发布

本文链接：https://blog.csdn.net/qq_45134635/article/details/122853374

版权

vue学习专栏收录该内容

1 篇文章 1 订阅

订阅专栏

路由跳转和location.href跳转的区别

动态组件

为什么要使用虚拟DOM，执行过程是什么

什么是纯函数

什么是VUE

vue是一套构建用户界面的渐进式框架
首先我们知道vue使用的是MVVM框架
渐进式的意思是vue中包含多个部件，如组件，路由，vuex等，我们可以在渲染的基础上，通过使用这些部件来构建一个更加完整的框架，这些功能相互独立，可以根据需要选择，这种根据需要选择部件来搭建框架的方法就是渐进式

简述MVVM

MVVM是一种新的框架，代表模型(Model)——视图(View)——视图模型(View Model)，在这种框架下，视图和模型是不能直接通信的，而视图模型为他们通信建立桥梁。
通信包括两个方向，一是由模型转换为视图，即将数据渲染到页面中，使用到的方法是数据绑定；二是由视图转换为模型，即将页面中的数据传到服务器，使用到的方法是DOM事件监听。如果同时实现双向通信，那就叫做双向绑定。

MVVM的优点：
低耦合
可重用

什么是单页面应用

单页面就是只有一个主页面的应用。浏览器在一开始就加载所有的htm，css和js，然后通过路由的方式来分开每个部分
优点
服务器压力较小
能够实现前后端分离
缺点
不利于搜索引擎优化（SEO）
初次加载耗时较多，可能会出现短时间白屏
怎么解决首屏白屏
路由设置使用懒加载
加载期间使用图片提示用户等待

如何实现父子间传值

父传子(props)
子组件prop中定义变量名
变量可以设置多种规范，包括
type：变量类型
default：默认值
required：是否为必写的参数
在父组件模板中使用子组件标签，标签中使用v-bind动态绑定变量

子传父($emit)
在子组件的方法中定义自定义事件，自定义事件中使用$emit注册事件
$emit的第一个参数表示自定义事件的名称，第二个参数表示传递的参数
在父组件模板中使用子组件标签，标签中使用自定义事件

作用域插槽

简述插槽

封装组件是为了提高复用性，而插槽是为了让组件有更强的扩展性。当希望页面中某些部分具有相同的格式，不同的内容时，可以在组件中插入插槽来实现这样的效果

具名插槽
当在一个组件中预留了多个插槽，希望替换其中某一个插槽的时候，就需要使用到具名插槽来实现等位置的替换
使用方法
子组件的插槽标签中定义属性name
父组件中将要替换插槽的标签外包裹template标签，给template标签添加v-slot属性

作用域插槽
定义在子组件中的数据很明显父组件是无法直接访问到的，但有时候我们想通过插槽来展示子组件中的一些数据，那么就需要使用到作用域插槽
使用方法
子组件的插槽标签中定义:data = "data" (前面的data是自己取得名字，后面的data是子组件data中的一个变量)
父组件的template标签中v-slot:default="slotProps"（slotProps是自己取得名字）

v-if和v-show的区别

使用v-show让元素显示与消失的原理是增加和删除display属性，v-if的原理是删除和增加该元素
v-if会让使用v-if标签内的子组件触发其生命周期
v-show更适用于反复显示与消失的情景

如何获取DOM元素

使用JS语言，通过id/class/标签来获取，如document.querySelector
使用$ref来获取

VUE常见的一些指令有哪些

v-bind动态绑定
v-for循环
使用v-for必须结合key一起使用
v-if/v-show判断
v-on事件绑定
v-model双向绑定
原理：v-bind和v-on的结合
v-for的优先级比v-if要高很多
v-once

自定义指令directive

自定义指令
第一个参数是自定义指令的名字，第二个参数是自定义指令相关的一些钩子函

钩子函数有哪些
bind：指令第一次绑定元素的时候调用，类似于create
inserted：插入到父节点时调用，类似于挂载mounted
update：node节点更新时调用
componentUpdated：全部更新完毕后调用
unbind：指令与元素解绑时调用，只调用一次

钩子函数的常用参数
el：被绑定的DOM元素
binding：一个对象，包含三个属性：
name：指令的名字
value：指令绑定的值
oldValue：指令绑定的前一个值
expression：自定义指令绑定的值是表达式的时候有该属性
全局自定义指令
 Vue.directive('color', {
     bind: function (el) {  //钩子函数的第一个参数都是被绑定的DOM元素
         el.style.color = 'red'  
    }
})
局部自定义指令（在vue实例括号里写入）
directives: {
    //指令名要加上引号
    'color': { 
        bind: function (el, binding) {
            el.style.color = binding.value
        }
    }
}

computed和watch的区别

computed有缓存，watch没有缓存
computed对变量进行计算，watch对变量进行监听
computed是需要有地方使用的，watch不需要使用
computed里边的变量必须得去一个新名字，不能和data里边的重复，watch必须是data里边数据的名字
computed不支持异步，watch支持异步

watch深度监听

在监听数组或对象这类型复杂数据类型的时候，内部的一个属性变化是无法监听到的，这时候需要开启深度监听deep：true
watch在最初绑定数据的时候是不会开启监听的，只有数据第一次发生变化的时候才会开始监听，如果想要一开始就开启监听，可以设置immediate：true
watch默认执行的方法是handler

data为什么是一个函数

组件化的目的是为了复用，但复用的同时需要保证数据的独立性，对象在栈中存储的额都是地址，而函数可以让属性私有化，保证了数据的独立性，所以需要写成函数。

常用的修饰符

v-on相关修饰符
.stop：阻止事件冒泡
.prevent：阻止默认事件
.keyCode：监听键盘的某一个键
.enter：监听键盘回车键
.native：让组件标签也可以使用原生事件
.once：让事件只能触发一次

v-model相关修饰符
.lazy：等待用户输入完毕才进行变量更新
.number：规定变量为数字型
.trim：删除变量两端的空格（中间的空格删不掉）

简述axios

axios是一种基于promise的网络请求，可以对服务器发送请求，它可以在多种流行框架中使用

axios常用到的参数包括：
url——请求的接口
methods——发送请求的方式
data/params——携带的参数(get请求是使用params，post请求时使用data)

axios的使用
创建axios实例
导入axios实例
axios.实例名({常用参数})
请求成功执行then中的代码，失败执行catch

拦截器interceptors
请求拦截：axios.interceptors.request.use(config => {},err =>{})
响应拦截：axios.interceptors.response.use(res => {},err =>{})

params和query传参的区别

params需要使用name来引入路由，query需要使用path来引入路由
params传参必须在路由后边动态添加参数名，如果不添加则参数不会显示在路径中，并且刷新会丢失

简述VUE生命周期

VUE的生命周期指的是VUE实例从创建到销毁的过程，其中包含八个相关的钩子函数

VUE的生命周期主要有初始化，加载，更新和销毁四个阶段
初始化
beforeCreate()
create()——请求到了数据，事件等，但还未加载
加载
beforeMount()——已经生成了HTML，但还没有挂载到页面上
mounted()——挂载页面
更新
beforeUpdate()
update()——重新渲染更新过的部分
销毁
beforeDestory()
destoryed()

初次加载时会调用哪些钩子函数
beforeCreate,created,beforeMount,mounted
nextTick的功能：在数据更新后立即操作获取更新后的DOM

导航钩子有哪些/执行顺序是什么

（想象皇上从一个宫殿去另一个宫殿）

beforeRouteLeave——组件内守卫（和妃子1说要走了）
beforeEach——全局守卫（太监大喊起驾）
beforeRouteUpdate——组件内守卫（妃子2的丫鬟说听说皇上要来）
beforeEnter——路由独享守卫（皇上在路上）
beforeRouteEnter——组件内守卫（妃子2的丫鬟说皇上来了）
beforeResolve——全局守卫（太监大喊皇上驾到）
afterEach——全局守卫（皇上下轿）

$route和$router的区别

$router是全局的路由器对象，有一些相关的路由方法，如push，go等
$route是当前所在的路由对象，可以获取到一些与该路由相关的参数，如path，name等

vue-router的两种模式

hash模式
原理是通过onhashchange事件监听location.href的变化
hash只能修改#之后的内容，可以前进后退
hash#之后的内容不会被包含在http请求头中，所以改变url不会导致页面重新加载
history模式
原理是HTML5中的pushstate()和replacestate()入栈出栈
history可以修改整个url，但这样会导致一个问题，就是当用户修改了url之后，服务器并没有这个相关资源，所以会报404，解决这个问题需要后端设置重定向到首页的操作

非父子组件/无关系组件传值

vuex
$EventBus事件总线

在main.js文件中，vue原型加入一个新的变量
在要传值的vue页面中发送事件 / 发布
在需要接收传值的vue页面中接收事件 / 订阅
为了防止反复被触发或者刷新被移除，建议在每次页面跳转前一处$EventBus
//main.js中：注册事件总线
Vue.prototype.$EventBus = new Vue()
//发布事件的vue页面中
this.$EventBus.$emit("bus","给你一个事件总线")
//接收事件的vue页面中
this.$EventBus.$on("bus",(busConent) => {
    this.busContent = busConent
})

//移除事件总线
$EventBus.$off('bus') //移除该事件总线
$EvnetBus.$off() //移除所有事件总线

简述VUEx

vuex是进行状态管理，即当一些变量需要在多个组件中使用到时，那就可以放到vuex中来进行管理

vuex中常用到的参数包括：
state：保存状态，即需要多处使用的变量
getters：对state中的变量进行计算处理，类似于computed
getters中的函数均包含两个参数
第一个参数时state，可以获得state中的变量
第二个参数getters，可以获得getters中的变量
mutations：同步方法写在这里，对state进行更新
使用mutations进行更新：
this.$store.commit('update'，payload)
update是mutations中定义的一个函数，payload表示携带的参数
actions:异步方法写在这里

vuex的特点
vuex中的状态是响应式的
不建议直接修改vuex中state里的变量，而是通过mutation来进行修改。因为state中的数据是响应式的，如果频繁直接修改，出了问题很难跟踪到哪步修改有问题

keep-alive

keep-alive是一个标签，从一个页面跳转到另一个页面的时候，会重新渲染和加载页面，但是有时候页面的内容并不会改变，重新加载会降低体验和性能，所以可以使用keep-alive来保持状态，避免重新渲染
如我们使用购物软件搜索“电脑”，之后选择了一台点进去看了看，看完以后返回到上一页，那这时候返回的页面可以使用keep-alive缓存而不是重新加载
三个相关标签动态属性：
include：字符串或表达式，名字匹配的组件会被缓存
exclude：字符串或表达式，名字匹配的组件不会被缓存
max：缓存组件数量的最大值
两个相关生命钩子：
activated：在组件挂载mounted执行完毕后会有一个钩子函数叫activated
deactivated：在离开这个路由时不触发beforeDestoryed和destoryed，而是触发deactivated

VUE响应式原理

什么是响应式
简单来说就是数据改变的时候，视图也会跟着改变
vue2中实现响应式主要使用的是defineProperty这个方法
主要步骤分为数据劫持，收集依赖，派发更新
defineProperty(）为每个属性添加setter和getter，进行数据劫持，其中getter可以获取数据或属性，setter可以对数据或属性进行设置
使用getter在进行数据读取时进行依赖收集，在对应的dep中存储所有的watcher
使用setter在数据更新时通知watcher进行更新，实现派发更新

VUE中template编译过程

模板通过编译生成AST抽象语法树
AST生成render函数
render函数结合数据生成虚拟DOM树
对虚拟DOM进行diff算法和patch生成新的UI

路由跳转和location.href跳转的区别

location.href跳转会导致页面刷新，路由跳转不会刷新页面

动态组件

为了实现一个位置可以切换使用多个组件，需要使用到动态组件
动态组件主要使用到的是 :is

为什么要使用虚拟DOM，执行过程是什么

js直接操作真实DOM是一件非常损耗性能的事情，每次数据的更新都会导致页面的重新计算和重绘等，所以可以使用虚拟DOM作为中间步骤
在数据发生更新时，先将更新保存到虚拟DOM中，之后对比虚拟DOM和真实DOM之间的不同，一次性更改真实DOM，解决了频繁修改导致的性能低下，页面卡顿问题