2023 前端Vue面试题大全汇总 (82道)

1、虚拟 DOM 中 key 的作用：

key 是虚拟 DOM 对象的标识，当状态中的数据发生变化时，Vue 会根据【新数据】生成【新的虚拟 DOM】，随后 Vue 进行【新虚拟 DOM】的差异比较，比较规则如下：

2、key 的对比规则：

1、旧虚拟 DOM 中找到了与新虚拟 DOM 相同的 key：若虚拟 DOM 中内容没变，直接使用之前的真实 DOM 若虚拟 DOM 中内容变了，则生成新的真实 DOM，随后替换掉页面中之前的真实 DOM

2、旧虚拟 DOM 中未找到与新虚拟 DOM 相同的 key 创建新的真实 DOM，随后渲染到页面

3、用 index 作为 key 可能会引发的问题：

1、若对数据进行：逆序添加、逆序删除等破坏顺序操作：会产生没有必要的真实 DOM 更新 ===> 界面效果没问底，但效率低

2、如果结构中还包含输入类的 DOM：会产生错误 DOM 更新 ===> 界面有问题

4、开发中如何选择 key？

1、最好使用每条数据的唯一标识作为 key，比如 id、手机号、身份证号、学号等唯一值

2、如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用 index 作为 key 是没有问题的

5、Vue 组件中 data 为什么必须是函数？

保证组件的独立性和可复用性，data 是一个函数，组件实例化的时候将会调用这个函数，返回一个对象，计算机会给这个对象分配一个内存地址，你实例化几次，就分配几个内存地址，他们的地址都不一样，所以每个组件中的数据不会相互干扰，改变其中一个组件的状态，其它组件不变。

6、vuex 的 State 特性是？

state 属性是 Vuex 中用于存放组件之间共享的数据；也就是说，我们把一些组件之间共享的状态主要存放在 state 属性中；它采用的是单一状态树——用一个对象就包含了全部的应用层级状态。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。

7、Vue 声明组件的 state 是⽤ data ⽅法，那为什么 data 是通过⼀个 function 来返回⼀个对象，⽽不是直接写⼀个对象呢？

从语法上说，如果不⽤ function 返回就会出现语法错误导致编译不通过。从原理上的话，⼤概就是组件可以被多次创建，如果不使⽤ function 就会使所有调⽤该组件的页⾯公⽤同⼀个数据域，这样就失去了组件的概念了

8、介绍一下 Vue 的响应式系统

1、任何一个 Vue Component 都有一个与之对应的 Watcher 实例

2、Vue 的 data 上的属性会被添加 getter 和 setter 属性

3、当 Vue Component render 函数被执行的时候, data 上会被 触碰 (touch), 即被读, getter 方法会被调用, 此时 Vue 会去记录此 Vue component 所依赖的所有 data。(这一过程被称为依赖收集)

4、data 被改动时（主要是用户操作）, 即被写, setter 方法会被调用, 此时 Vue 会去通知所有依赖于此 data 的组件去调用他们的 render 函数进行更新

9、computed 与 watch 的区别

1、computed 擅长处理的场景：一个数据受多个数据影响；watch 擅长处理的场景：一个数据影响多个数据。

2、功能上：computed 是计算属性，watch 是监听一个值的变化，然后执行对应的回调。

3、是否调用缓存：computed 支持缓存，只有依赖数据发生改变, 才会重新进行计算; 而 watch 不支持缓存，数据变, 直接会触发相应的操作。

4、是否调用 return：computed 中的函数必须要用 return 返回，watch 中的函数不是必须要用 return。

5、computed 不支持异步 ，当 computed 内有异步操作时无效，无法监听数据的变化; 而 watch 支持异步。

6、computed 默认第一次加载的时候就开始监听；watch 默认第一次加载不做监听，如果需要第一次加载做监听，添加 immediate 属性，设置为 true（immediate:true）

10、介绍一下 Vue 的生命周期

每一个 vue 实例从创建到销毁的过程，就是这个 vue 实例的生命周期。在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载 Dom、渲染→更新→渲染、卸载等一系列过程。

将要创建 ===> 调用 beforeCreate 函数

创建完毕 ===> 调用 created 函数

将要挂载 ===> 调用 beforeMount 函数

挂载完毕 ===> 调用 mounted 函数

将要更新 ===> 调用 beforeUpdate 函数

更新完毕 ===> 调用 uodated 函数

将要销毁 ===> 调用 beforeDestory 函数

销毁完毕 ===> 调用 destroyed 函数

11、vue 生命周期的作用是什么?

Vue 生命周期中有多个事件钩子，让我们在控制整个 Vue 实例过程时更容易形成好的逻辑。

12、第一次页面加载会触发哪几个钩子?

第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

13、DOM 渲染在 哪个周期中就已经完成?

DOM 渲染在 mounted 中就已经完成了。

14、简单描述每个周期具体适合哪些场景

beforecreate : 可以在这加个 loading 事件，在加载实例时触发

created : 初始化完成时的事件写在这⾥，如在这结束 loading 事件，异步请求也适宜在这⾥调⽤

mounted : 挂载元素，获取到 DOM 节点

updated : 如果对数据统⼀处理，在这⾥写上相应函数

beforeDestroy : 可以做⼀个确认停⽌事件的确认框

nextTick : 更新数据后⽴即操作 dom

15、组件之间是怎么通信的

组件之间通信主要分为三种：父子传参，子父传参，兄弟传参。

1. 父子传参：父组件通过自定义属性的方式传参，通过 props 属性给子组件传参，子组件通过 props 属性去接收参数

2. 子父传参：子组件通过自定义事件的方式传参，通过 $emit 去进行传参。

16、Vue.cli 中怎样使用自定义的组件？

1. 在 components 目录新建组件文件

2. 在需要用到的页面 import 中导入

3. 使用 component 注册

4. 在 template 视图中使用组件标签

17、Vue 如何实现按需加载配合 webpack 设置

• webpack 中提供了 require.ensure( ) 来实现按需加载。以前引入路由是通过 import 这样的方式引入，改为 const 定义方式进行引入

• 不进行页面按需加载引入方式 import home from …/…/common/home.vue

• 进行页面按需加载的引入方式：const home = r =>require.ensure([],() =>require('…/…/common/home.vue))

18、scss 是什么？在 Vue.cli 中的安装使用步骤是？有哪几大特性？

css 的预编译语言。

使用步骤：

第一步：先装 css-loader、node-loader、sass-loader 等加载器模块；

第二步：在 build 目录找到 webpack.base.config.js，在 extends 属性中加一个拓展. scss；

第三步：在同一个文件，配置一个 module 属性；

第四步：然后在组件的 style 标签加上 lang 属性 ，例如：lang=”scss”；

特性:

• 可以用变量，例如（$变量名称=值）；

• 可以用混合器；

• 可以嵌套

19、如何让 CSS 只在当前组件中起作用？

将当前组件的