2022Vue经典面试题及答案汇总(持续更新）

最新推荐文章于 2023-11-17 23:27:47 发布

xiaoweiwei99

最新推荐文章于 2023-11-17 23:27:47 发布

阅读量3.2k

点赞数 6

分类专栏：面试阿里巴巴文章标签： android 前端后端

本文链接：https://blog.csdn.net/qq_46416934/article/details/126097089

版权

本文深入探讨了Vue.js中的关键概念，包括虚拟DOM中的key作用、组件状态管理和生命周期、Vue CLI的使用、按需加载、Vuex状态管理、Vue Router的导航守卫、组件通信等。讲解了Vue的响应式系统、Vue与Angular和React的差异，以及Vue开发的最佳实践。文章旨在帮助读者全面理解Vue开发中遇到的各种面试问题，提升技术水平。

摘要由CSDN通过智能技术生成

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、渲染→更新→渲染、卸载等一系列过程。