VUE面试题系列01（带数字，带序号），前端面试题

喜欢ヅ旅行 2022-12-30 03:43 132阅读 0赞

## VUE面试题系列01（带数字，带序号） ##

### 1、v-show 与 v-if 有什么区别？ ###

**相同点：**  
v-show和 v-if都是 控制 dom元素 的 显示和隐藏 的。

**不同点：**  
1、原理：

v-show是通过控制元素的样式属性display的值，来完成显示和隐藏；  
 v-if是通过对dom元素的添加和删除，完成显示和隐藏

2、使用场景：由原理（做法）得出使用场景的区别

v-show：使用在dom元素频繁切换的场景  
 v-if：当dom元素的切换不频繁，可以使用。特别是，首次元素处于隐藏的情况下。

### 2、说说你对 SPA 单页面的理解，它的优缺点分别是什么？ ###

**1）、首先：**

SPA的英文是single-page application ，也就是说**整个项目中只有一个页面**。

单页面应用的实现思路： 就是在 Web 页面初始化时加载所有的 HTML、JavaScript 和 CSS，页面的内容的变化，靠动态操作DOM。

**2）、其次，**

说说它的优点和缺点：

它的优点有**三**点：

第一点：\*\*局部刷新。\*\*用户体验好、快，内容的改变不需要重新加载整个页面。

第二点：\*\*服务器的压力小。\*\*基于上面一点，SPA 对服务器的压力小；

第三点：\*\*前后端职责分离。\*\*架构清晰，前端进行交互逻辑，后端负责数据处理；

它的缺点也有**三**点：

第一点：\*\*初次加载耗时多。\*\*为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载；

第二点：\*\*前进后退路由管理问题。\*\*由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理（这是vue-router做的）；

第三点：\*\*SEO 难度较大。\*\*由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。

### 3、怎样理解 Vue 的单向数据流 ###

**首先**

单项数据流是发生在**父组件朝子组件传值的时候**，所有的 prop 使得其父子 prop 之间形成了一个单向下行绑定。  
 也就是说：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态。

**而且**

每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。所以，在一个子组件内部改变 prop，Vue 会在浏览器的控制台中发出警告。

### 4、computed 和 watch 的区别和运用的场景？ ###

**首先（相同点）：**

computed 和 watch都可以实现数据的监听。

**其次（区别）：**

**第一（本质）：**  
**computed：** **是计算属性**，依赖其它属性值，并且 computed 的值**有缓存**，当依赖的属性值发生改变时，才会重新计算 computed 的值，它可以设置getter和setter.  
**watch：** 更多的是**观察**的作用，每当监听的数据变化时都会执行回调进行后续操作,它只能设置getter.

**第二（运用场景）：**  
**computed**：当我们需要进行数值计算，并且依赖于其它数据时，使用 computed。  
**watch**：当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch。

### 5、直接用下标（索引）给一个数组项赋值，Vue 能检测到变化吗？ ###

**不能**

因为，vue再做数据劫持时，只对数组做了劫持，没有对数组的每一项进行劫持。所以，用下标的方式修改数组项时，vue不能检测到数据的变化。

为了解决他们，Vue 也提供了操作方法： Vue.set  
Vue.set（数组名，下标，新值）

### 6、谈谈你对 Vue 生命周期的理解？ ###

**1）、生命周期是什么？**  
Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模版、挂载 Dom -> 渲染、更新 -> 渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

**2）、各个生命周期阶段及其钩子函数**

vue的生命周期核心经历了四个阶段，在四个阶段的前后分别有两个钩子函数。

第一阶段：**数据挂载**阶段：把配置项data中的属性，赋给了vue对象本身，并做了数据劫持。

该阶段前后的两个钩子函数：beforeCreate和created

第二阶段：**模板渲染**阶段：把vue对象的数据渲染到模板上。

该阶段前后的两个钩子函数：beforeMount和mounted

第三阶段：**组件更新**阶段：当数据发送变化时，组件会进行重新渲染，所以，准确的说是，组件重新渲染阶段。

该阶段前后的两个钩子函数：beforeUpdate和updated

第四阶段：**组件销毁**阶段：组件销毁。

该阶段前后的两个钩子函数：beforeDestroy和destroyed

可以补充：

当使用keep-alive包裹组件时，会有组件激活和停用之说，这两个钩子函数分别是：activited和deactivated

还可以补充：

项目场景，如：发送请求，如：父组件修改子组件的props引起子组件的更新等等。

详情请参考： https://blog.csdn.net/jiang7701037/article/details/83118665

### 7、Vue 的父组件和子组件生命周期钩子函数执行顺序？ ###

Vue 的父子组件钩子函数的执行顺序可以归类为4个 部分：

第一部分：首次加载渲染

父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

第二部分：父组件修改子组件的props值时：  
父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

第三部分：父组件修改的数据跟子组件没有关系时，

不会影响子组件 父 beforeUpdate -> 父 updated

第四部分：销毁过程

父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

### 8、在哪个生命周期内调用异步请求？ ###

答：大部分时候，会在created发送请求。  
因为，  
1）、此时data已经挂载到vue实例了，放在beforeCreate里太早，vue实例没有数据，放在mounted里太晚。  
2）、放在 created 中有助于一致性，因为ssr不支持 beforeMount 、mounted 钩子函数。  
Created的使用场景：如果组件的初始数据来自于后端，那就在created里发送请求

### 9、组件中 data 为什么是一个函数？ ###

因为**data是引用类型**，如果不用函数，所有组件的data会指向同一块内存区域，导致数据之间互相影响。

而使用函数时，每次实例化组件时，调用函数，return一个新(new)的data对象。这样每个实例可以维护一份被返回对象的独立的拷贝，组件实例之间的 data 属性值不会互相影响。

### 10、v-model 的原理？ ###

v-model 指令主要用在表单元素上实现数据双向绑定的。  
例如：input、textarea、select 等创建双向数据绑定，本质上不过是语法糖，其实v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

*  text 和 textarea 元素使用 value 属性和 input 事件；
 *  checkbox 和 radio 使用 checked 属性和 change 事件；
 *  select 字段将 value 作为 prop 并将 change 作为事件。

### 11、Vue 实现数据绑定的原理 ###

vue数据绑定是通过 **数据劫持**和**观察者模式** 的方式来实现的。

1、数据劫持：使用Object.defineProperty();

目的是：**感知属性的变化**。当给属性赋值时，程序是能够感知的（知道的）。如果知道的话，就可以控制属性值的有效范围，也可以改变其它属性的值等。

当你把一个普通的 JavaScript 对象（json）传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。

Object.defineProperty()函数：https://blog.csdn.net/jiang7701037/article/details/102785223

2、观察者模式（发布订阅模式）：  
 目的：当属性发生变化时，使用该数据地方（模板，计算属性，watch等等）跟着变化

### 12、Vue 组件间通信有哪几种方式？ ###

Vue 组件间通信主要指以下 3 类通信：父子组件通信、隔代组件通信、兄弟组件通信，下面我们分别介绍每种通信方式：

**（1）props / $emit ： 父子组件通信**

**（2）ref： 适用 父子组件通信**

**（3）EventBus （$emit / $on）： 适用于 父子、隔代、兄弟组件通信**

**（4）$root：集中管理，适用于所有场景**

**（5）Vuex 适用于所有场景**

### 13、谈谈你对 keep-alive 的了解？ ###

keep-alive 可以缓存其它组件及其的组件的状态，避免了组件的频繁创建和销毁。

它有**三**个特性：

1）、用于**缓存组件**，一般结合路由和动态组件一起使用。

2）、提供 **include 和 exclude** 属性。两者都支持字符串或正则表达式， include 表示只有名称匹配的组件会被缓存，exclude 表示任何名称匹配的组件都不会被缓存 ，其中 exclude 的优先级比 include 高；

3）、对应两个钩子函数 **activated 和 deactivated** ，当组件被激活时，触发钩子函数 activated，当组件被移除时，触发钩子函数 deactivated。

### 14、Vue 中的 key 有什么作用？ ###

**首先**

key 是Vue 中 vnode 的唯一标记，通过这个 key，我们的 diff 操作可以更准确、更快速。

**再说一下**，diff算法的执行过程：

1）、oldCh 和 newCh 各有两个头尾的变量 oldStartIndex、oldEndIndex 和 newStartIndex、newEndIndex，  
2）、在新节点和旧节点进行两两对比时，共有4种比较方式：  
a.newStartIndex 和oldStartIndex 、  
b.newEndIndex 和 oldEndIndex 、  
c.newStartIndex 和 oldEndIndex 、  
d.newEndIndex 和 oldStartIndex，  
如果以上 4 种比较都没匹配，如果设置了key，就会用 key 再进行比较。

### 15、你对 Vue 项目进行哪些优化？ ###

**第一个方面：代码层面的优化**  
v-if 和 v-show 区分使用场景  
computed 和 watch 区分使用场景  
v-for 遍历必须为 item 添加 key，且避免同时使用 v-if  
长列表性能优化  
事件的销毁  
图片资源懒加载  
路由懒加载  
第三方插件的按需引入  
优化无限列表性能  
服务端渲染 SSR or 预渲染  
**第二个方面：Webpack 层面的优化**  
Webpack 对图片进行压缩  
减少 ES6 转为 ES5 的冗余代码  
提取公共代码  
模板预编译  
提取组件的 CSS  
优化 SourceMap  
构建结果输出分析  
Vue 项目的编译优化  
**第三个方面：基础的 Web 技术的优化**  
开启 gzip 压缩  
浏览器缓存  
CDN 的使用  
使用 Chrome Performance 查找性能瓶颈