2021vue面试题总结

女爷i 2023-01-05 01:21 308阅读 0赞

故心故心故心故心小故冲啊

--------------------

### 文章目录 ###

*  1.说说你对vue的理解?
 *  2.说说你对双向绑定的理解?
 *  3.Vue中的v-show和v-if怎么理解？
 *  4.Vue组件间通信方式都有哪些?
 *  5.Vue中的$nextTick怎么理解?
 *  6.为什么Vue中的v-if和v-for不建议一起用?
 *  7.Vue项目中有封装过axios吗？怎么封装的？
 *  8.了解过vue中的diff算法吗？说说看
 *  9.Vue实例挂载的过程中发生了什么?
 *  10.说说你对keep-alive的理解是什么？怎么缓存当前的组件？缓存后怎么更新？
 *  11.说说为什么要在列表组件中写 key，其作用是什么？
 *  12.Vue常用的修饰符有哪些?有什么应用场景?
 *  13.什么是虚拟DOM？如何实现一个虚拟DOM？
 *  14.为什么data属性是一个函数而不是一个对象？
 *  15.说说你对Vue生命周期的理解?
 *  16.说说对observable的理解
 *  17.SPA（单页应用）首屏加载速度慢怎么解决？
 *  正在收录中....

--------------------

# 1.说说你对vue的理解? #

vue是一个用于构建用户界面的开源渐进式框架，也是一个创建单应用页面的Web应用框架.  
Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互  
vue有俩大核心特性  
1.数据驱动（MVVM)  
MVVM表示的是 Model-View-ViewModel

*  Model：模型层，负责处理业务逻辑以及和服务器端进行交互
 *  View：视图层：负责将数据模型转化为UI展示出来，可以简单的理解为HTML页面
 *  ViewModel：视图模型层，用来连接Model和View，是Model和View之间的通信桥梁(处理逻辑性代码)

2.组件化  
一句话来说就是把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式，在Vue中每一个.vue文件都可以视为一个组件  
**组件化的优势**

*  降低整个系统的耦合度，**在保持接口不变的情况下，我们可以替换不同的组件快速完成需求**，例如输入框，可以替换为日历、时间、范围等组件作具体的实现
 *  **调试方便**，由于整个系统是通过组件组合起来的，在出现问题的时候，可以用排除法直接移除组件，或者根据报错的组件快速定位问题，之所以能够快速定位，是因为每个组件之间低耦合，职责单一，所以逻辑会比分析整个系统要简单
 *  **提高可维护性**，由于每个组件的职责单一，并且组件在系统中是被复用的，所以对代码进行优化可获得系统的整体升级

[详解][Link 1]

# 2.说说你对双向绑定的理解? #

用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定  
[详解][Link 2]

# 3.Vue中的v-show和v-if怎么理解？ #

v-show 与 v-if 的作用效果是相同的(不含v-else)，都能控制元素在页面是否显示  
当表达式为true的时候，都会占据页面的位置  
当表达式都为false时，都不会占据页面位置  
**v-show与v-if的区别**  
**1.控制手段不同**  
控制手段：v-show隐藏则是为该元素添加css–display:none，dom元素依旧还在。v-if显示隐藏是将dom元素整个添加或删除

**2.编译过程不同**  
编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换

**3.编译条件不同**

编译条件：v-if是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时，并不做操作，直到为真才渲染  
v-show 由false变为true的时候不会触发组件的生命周期  
v-if由false变为true的时候，触发组件的beforeCreate、create、beforeMount、mounted钩子，由true变为false的时候触发组件的beforeDestroy、destroyed方法

**4.性能消耗不同**  
性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗  
[详解][Link 3]

# 4.Vue组件间通信方式都有哪些? #

父子关系的组件数据传递选择 props 与 $emit进行传递，也可选择ref  
兄弟关系的组件数据传递可选择$bus，其次可以选择$parent进行传递  
祖先与后代组件数据传递可选择attrs与listeners或者 Provide与 Inject  
复杂关系的组件数据传递可以通过vuex存放共享的变量

[详解][Link 4]

# 5.Vue中的$nextTick怎么理解? #

官方对其的定义

> 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM

就是说可以立即获取dom更新后的数据进行更新

ps:在dom数据在发现变化的时候，vue并不会立刻去更新Dom，而是将修改数据的操作放在了一个异步操作队列中

如果我们一直修改相同数据，异步操作队列还会进行去重

等待同一事件循环中的所有数据变化完成之后，会将队列中的事件拿来进行处理，进行DOM的更新  
[详解][Link 5]

# 6.为什么Vue中的v-if和v-for不建议一起用? #

> v-for优先级比v-if高  
> v-if 和 v-for 同时用在同一个元素上，带来性能方面的浪费（每次渲染都会先循环再进行条件判断）

[详解][Link 6]

# 7.Vue项目中有封装过axios吗？怎么封装的？ #

请求拦截器 --在请求头中添加token  
响应拦截器  
[详解][Link 7]

# 8.了解过vue中的diff算法吗？说说看 #

diff 算法是一种通过同层的树节点进行比较的高效算法  
[详解][Link 8]

# 9.Vue实例挂载的过程中发生了什么? #

new Vue的时候调用会调用\_init方法

*  定义 s e t 、 set、set、get 、d e l e t e 、 delete、delete、watch 等方法
 *  定义 o n 、 on、on、off、e m i t 、 emit、emit、off等事件
 *  定义 \_update、f o r c e U p d a t e 、 forceUpdate、forceUpdate、destroy生命周期
 *  调用$mount进行页面的挂载
 *  挂载的时候主要是通过mountComponent方法
 *  定义updateComponent更新函数
 *  执行render生成虚拟DOM
 *  \_update将虚拟DOM生成真实DOM结构，并且渲染到页面中

[详解][Link 9]

# 10.说说你对keep-alive的理解是什么？怎么缓存当前的组件？缓存后怎么更新？ #

keep-alive是vue中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM

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

keep-alive可以设置以下props属性：

*  include - 字符串或正则表达式。只有名称匹配的组件会被缓存
 *  exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存
 *  max - 数字。最多可以缓存多少组件实例

[详解][Link 10]

# 11.说说为什么要在列表组件中写 key，其作用是什么？ #

可见设置key能够大大减少对页面的DOM操作，提高了diff效率  
[详解][Link 11]

# 12.Vue常用的修饰符有哪些?有什么应用场景? #

表单修饰符  
事件修饰符  
鼠标按键修饰符  
键值修饰符  
v-bind修饰符  
[详解][Link 12]

# 13.什么是虚拟DOM？如何实现一个虚拟DOM？ #

虚拟 DOM （Virtual DOM ）这个概念相信大家都不陌生，从 React 到 Vue ，虚拟 DOM 为这两个框架都带来了跨平台的能力（React-Native 和 Weex）

实际上它只是一层对真实DOM的抽象，以JavaScript 对象 (VNode 节点) 作为基础的树，用对象的属性来描述节点，最终可以通过一系列操作使这棵树映射到真实环境上

在Javascript对象中，虚拟DOM 表现为一个 Object对象。并且最少包含标签名 (tag)、属性 (attrs) 和子元素对象 (children) 三个属性，不同框架对这三个属性的名命可能会有差别

创建虚拟DOM就是为了更好将虚拟的节点渲染到页面视图中，所以虚拟DOM对象的节点与真实DOM的属性一一照应

在vue中同样使用到了虚拟DOM技术  
[详解][Link 13]

# 14.为什么data属性是一个函数而不是一个对象？ #

根实例对象data可以是对象也可以是函数（根实例是单例），不会产生数据污染情况  
组件实例对象data必须为函数，目的是为了防止多个组件实例对象之间共用一个data，产生数据污染。采用函数的形式，initData时会将其作为工厂函数都会返回全新data对象  
[详解][Link 14]

# 15.说说你对Vue生命周期的理解? #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70]  
[详解][Link 15]

# 16.说说对observable的理解 #

Vue.observable，让一个对象变成响应式数据。Vue 内部会用它来处理 data 函数返回的对象  
[详解][Link 16]

# 17.SPA（单页应用）首屏加载速度慢怎么解决？ #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 1]  
[详解][Link 17]

# 正在收录中… #

[Link 1]: https://blog.csdn.net/qq_41555854/article/details/112463997
[Link 2]: https://blog.csdn.net/qq_41555854/article/details/112464517
[Link 3]: https://blog.csdn.net/qq_41555854/article/details/112389319
[Link 4]: https://blog.csdn.net/qq_41555854/article/details/112424831
[Link 5]: https://blog.csdn.net/qq_41555854/article/details/112555796
[Link 6]: https://blog.csdn.net/qq_41555854/article/details/112556185
[Link 7]: https://blog.csdn.net/qq_41555854/article/details/112703438
[Link 8]: https://blog.csdn.net/qq_41555854/article/details/112704354
[Link 9]: https://blog.csdn.net/qq_41555854/article/details/112620220
[Link 10]: https://blog.csdn.net/qq_41555854/article/details/112728232
[Link 11]: https://blog.csdn.net/qq_41555854/article/details/112728522
[Link 12]: https://blog.csdn.net/qq_41555854/article/details/112729236
[Link 13]: https://blog.csdn.net/qq_41555854/article/details/112757697
[Link 14]: https://blog.csdn.net/qq_41555854/article/details/112757996
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70]: /images/20221119/544418a73bd94537bb55581be5bf04e3.png
[Link 15]: https://blog.csdn.net/qq_41555854/article/details/112774552
[Link 16]: https://blog.csdn.net/qq_41555854/article/details/112799246
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 1]: /images/20221119/e242ba9056ad4fd0b99decd9daf2751e.png
[Link 17]: https://blog.csdn.net/qq_41555854/article/details/112799335