面试中精选高频Vue面试题

我会带着你远行 2022-08-30 01:56 372阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70]

### 1.单页应用SPA,多页应用MPA ###

SPA 的核心： 加载单个html页面 动态更新。利用JavaScript动态的变换html，采用div的切换和隐藏。

SPA的优势：单页内容改变无需加载页面，体验好；多端可共用一套代码；减轻交互时服务端的压力。

SPA的劣势：seo难以查询；初次加载资源多，耗时长；路由无法进行前进和后退。

### 2.MVVM ###

首先MVVM 代表 viewModel view model  
核心为view 和viewModel 的双向绑定：对数据model进行劫持，当数据变动时，数据会触发劫持时的绑定方法(getter setter)，对视图进行更新。

> 详细过程： 分为observer complie 和watcher 首先 observer  
> 对data中的数据对象进行递归遍历，添加getter和setter方法。  
> complie为指令解析器，位于view层，将数据变化与更新数据绑定，传给watcher。 watcher对应viewModel层  
> 链接observer和complie 所有的watchers存在于订阅器中，watcher将observer  
> 监听到的数据变化对应的回调函数，处理数据，反馈给view层跟新。

### 3.v-if 和v-show ###

区别在于是 控制DOM节点的存在还是设置css的样式。  
v-if在切换过程中会伴随着DOM元素的生成和销毁，在过程中会重建和销毁事件监听等。

> 编译角度： v-if是惰性的 如果是假值则不编译 只有在条件为真值时才编译 v-show是在任何情况下都编译的

### 4.v-for 和v-if的优先级 ###

首先这里官网是不建议一起使用的，在vue源码中 判断 for 的优先级是高于 if的  
如果要同时使用 ，建议在for外嵌套一层if以达到效果

### 5.data中为什么必须是一个函数 ###

反向思考一下如果data是一个对象的话，在组件引入过程中，其实都是在操作同一个对象，由于组件的共享，data也在共享，所以data需要用函数返回一个对象的独立拷贝，以保持数据解耦。

### 6.v-model的原理 ###

v-model 是vue双向绑定的指令。可以将页面输入的值同步更新到相关绑定的data属性上，也会在data属性更新时，更新页面控件的值。这里可以详见双向绑定的原理，问v-model的原理即是问complie指令解析器的过程。

### 7.computed watch 和 method ###

首先method 有点特殊 可以不横向比较 它主要用于定义函数 并且需单独调用

> computed 和 watch 中主要的差别在于 computed 有缓存性 且依赖于其他的值 只有依赖的值发生变化的时候  
> computed的值才会重新计算。 watch 则没有缓存性 起到观察作用 监听数据变化 进行异步操作

### 8.vue生命周期 ###

create mount update destroy 四个主要的生命周期 而衍生出 before xxx xxxed 两种 共八个生命周期。

> 比较重要的几个生命周期：  
> created ：初始化某些值 ，避免undefined  
> mounted：对html节点进行dom操作

### 9.父子组件的生命周期顺序 ###

创建实例是从外到内的，更新和销毁过程是由内到外的

mounted 结束后可以操作dom节点 所以说子组件的mouted一定是先于父组件的

> 加载渲染过程：  
> father beforeCreate  
> father created  
> father beforeMount  
> son beforeCreate  
> son create  
> son beforeMount  
> son mounted  
> father mounted

> 更新过程：  
> father beforeUpdate  
> son beforeUpdate  
> son Updated  
> father Updated

> 销毁过程：  
> father beforeDestory  
> son beforeDestory  
> son destoryed  
> father destoryed

### 10.组件间传值 ###

父传子：props，子传父：$emit，非父子组件：bus事件总线法。

> bus事件总线法的步骤：  
> 首先创建一个bus的vue实例中间件  
> 在需要通信的组件中都引入这个中间件  
> 利用`$emit`和`$on`进行发送和接收

### 11.单向数据流 ###

易于控制，流向简单易于跟踪，子组件不会影响父组件的值

### 12.keep-alive ###

使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们

### 13.vue中key的作用 ###

key的主要作用是高效的 更新虚拟DOM  
其原理是vue在patch过程中通过key可以精准的判断两个vnode节点是不是同一个，从而避免频繁更新不同元素，让整个过程更加高效，减少DOM操作量，提高性能。

> 不设置key可能会在列表更新时引发bug

### 14.vue中diff算法 ###

[详见diff算法分析博客][diff]

> 简单讲一下过程就是： 首先通过patch方法进行 新旧Vnode 的比较。都不存在以新Vnode 为准  
> 都存在再比较key和tag如果不相同，以新Vnode为准 相同则进行patchValue 比较 是否有children节点  
> 没有则进行多种情况比较 有则进行updatechildren操作 进行指针循环

### 14.虚拟DOM ###

当状态更新时，将新的JavaScript对象和旧的JavaScript对象进行比较(即diff算法)，运算出两者的差异，将差异应用到真正的DOM，以此减少了DOM的操作。

### 15.nextTick ###

在下次 DOM 更新循环结束之后执行延迟回调

> nextTick（）的作用是：将回调延迟到DOM 更新循环之后执行。在修改数据时立即使用它，然后等待 DOM 更新，便可达到获取  
> 更新后的节点 的目的

### 16.vueX ###

状态管理模式，多个组件共享状态场景

state ：数据  
getters：state的计算属性：可以定义getter函数  
mutations：提交更新数据的方法，必须是同步。  
action：提交更新数据的方法，可以包含异步操作。  
modules：模块化vuex

### 17.插槽 ###

父组件中嵌套的内容 ，在子组件中`<solt></solt>` 标签中显示。

### 18.Vue-Router 的两种模式 ###

分别是hash 模式和 history模式  
hash模式是根据锚点\#来动态的变化位置 调用window.onhashchange方法进行 异步操作

而history 模式需要调用window.history 的方法进行异步 操作

### 19.Vue-Router 有哪几种导航钩子 ###

router.beforeEach() 进入之前触发

router.afterEach() 进入之后触发

参数：to from next

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70]: /images/20220829/9114586532fa4679a773c2873b0979f2.png
[diff]: https://blog.csdn.net/qq_43277404/article/details/118752958?spm=1001.2014.3001.5501