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

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

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

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

不同点：

1、原理不同：

​ v-if是通过dom元素的删除和添加，来完成显示和隐藏，

​ v-show是通过修改样式属性display的值，来完成显示和隐藏。

2、性能消耗的不同

​ v-if的性能损耗体现在切换时，

​ v-show的性能损耗在首次（特别是首次处于的显示的情况下）

 3、使用场景的不同

​ v-if使用在元素切换不频繁的场景。

​ v-show使用在元素切换频繁的场景。

  4、安全性的不同

​ v-if的安全性好

​ v-show的安全性不好。

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函数），它也可以设置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

还可以补充：

项目场景，
1）、（当页面初始的数据来自后端）发送请求在哪个钩子函数，created。为什么，请看第八个题。
2）、在destroyed钩子函数里销毁不使用的全局性（挂载window对象下）的对象：定时器、清除事件总线绑定的事件。

详情请参考： 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 作为事件。

视频讲解：
https://www.aliyundrive.com/s/LToAQHXLevU

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 操作可以更准确、更快速。虚拟dom更新时需要使用到可以来定位dom元素。

再说一下，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 查找性能瓶颈