前段框架及项目面试的介绍五

本是古典何须时尚 2022-11-10 10:36 42阅读 0赞

## Vue 面试真题演练 ##

> 觉得是面试中的  
> 网上收集整理的面试题  
> 热门技术和知识点

#### v-show 和 v-if 的区别 ####

> v-show 通过 CSS display 控制显示和隐藏  
> v-if 组件真正的渲染和销毁，而不是显示和隐藏  
> 频繁切换显示状态用 v-show ，否则用 v-if

#### 为何在 v-for 中用 key ####

> 必须用key，切不能是 index 和 random  
> diff 算法中通过 tag 和 key 来判断，是否是 sameNode  
> 减少渲染次数 ， 提升渲染能力

#### 描述 Vue 组件生命周期（父子组件） ####

> 单组件生命周期图  
> 父子组件生命周期关系

###### 单组件生命周期图 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70]

###### 父子组件生命周期关系 ######

同react，vue组件也有一套完整的生命周期，不同阶段有不同的分工。总体来讲经常会用的生命周期钩子有以下几种：

*  List item
 *  created
 *  mounted
 *  destroy  
    通常会在这些钩子中处理一些异步请求，最常见的就是发起网络请求调用api获取数据。  
    这里有个问题：在单一组件中，钩子的执行顺序是created -> mounted -> destroyed，但当父子组件嵌套时，父组件和子组件各拥有各自独立的钩子函数，这些父子组件的这些钩子是如何交融执行，且执行顺序又是怎样的呢?  
    最近开发中遇到的一个“诡异”的问题，就是由于对父子组件生命周期钩子执行顺序理解不透彻引起的。问题是这样的：有一个组件有由一系列子组件组成，子组件又被分解成组件，这样下来就构成了三级组件。需求是在组件显示在页面上之后，再将数据初始化进行回显。父组件获取数据后传递到子组件，要求子组件根据这个值将内部元数据进行过滤和加工。那么在子组件中什么时机下才能获取父组件传递过来的新值呢？。  
    我的做法是这样的：最高层父组件的mounted中发起请求获取数据，通过vue的响应机制以props的形式传递到子组件，在子组件的mounted中拿到对应的props进行处理。这样做法要求父组件的mounted时机先于子组件的mounted,但事实是这样吗？显然不是。  
    这样导致的问题就是，数据无法正确的回显。

#### 1 探究 ####

探究的方法是：写一个有父子嵌套关系的组件，分别在他们的钩子函数中打印日志，观察执行顺序。得到的结果如图所示，父组件先创建，然后子组件创建；子组件先挂载，然后父组件挂载。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 1]  
子组件挂载完成后，父组件还未挂载。所以组件数据回显的时候，在父组件mounted中获取api的数据，子组件的mounted是拿不到的。  
仔细看看父子组件生命周期钩子的执行顺序，会发现created这个钩子是按照从外内顺序执行，所以回显场景的解决方案是：在created中发起请求获取数据，依次在子组件的created中会接收到这个数据。

##### 2 结论 #####

Vue父子组件生命周期钩子的执行顺序遵循：从外到内，然后再从内到外，不管嵌套几层深，也遵循这个规律。  
组件化的设计思路大抵相同，React中父子组件生命周期钩子执行顺序，具体没做探究，但是值得一提的是react父组件的componentDidMount也是晚于子组件componentDidMount执行的

#### Vue 组件如何通讯（常见的） ####

> 父子组件 props 和 this.$emit
> 
> 自定义事件 , Event.$off 和 Event. $emit 和 Event.\{这个位置放￥英文的\}no  
> Vuex

#### 描述组件渲染和更新的过程 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70_pic_center]

#### 双线数据绑定 v-model 的实现原理 ####

> input 元素的 value = this.name  
> 绑定 input 事件 this.name = $event.target.value  
> data 更新触发 re-render

#### MVVM 的理解 ####

> Model 代表数据模型  
> View 代表UI视图  
> ViewModel 负责监听 Model 中数据的改变并且控制视图的更新(桥梁，可以理解成mvc中的控制器)  
> 简单理解：视图请求数据，将请求发送至VModel，在Vmodel的两端具有监听机制，直接调用模型的数据，一端改变全部改变，利用数据劫持，结合订阅者和发布者模式，实现数据的双向绑定  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70_pic_center 1]

#### computed 有何特点 ####

> 缓存， data 不变不回重新计算  
> 提高性能

#### 为何组件 data 必须是一个函数 ####

> 如果不是一个函数的话，每个组件的实例的data都是同一个引用数据，当该组件作为公共组件共享使用，一个地方的data更改，所有的data一起改变。如果data是一个函数，每个实例的data都在闭包当中，就不会各自影响了  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70_pic_center 2]

#### ajax 请求应该放在那个生命周期中 ####

> 放在 mounted（）\{\} 中  
> JS 是单线程 ， ajax 异步获取数据  
> 放在 mounted 之前没有用的，只会让逻辑鞥家混乱

#### 如何将组件所有 props 传递给子组件 ####

1.  $props
2.  < User v-bind = “$props” />
3.  细节知识点，优先级不高

#### 如何组件实现 v-model ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70_pic_center 3]

#### 多个组件有相同的逻辑，如何抽离 ####

> mixin  
> 以及 mixin 的一些缺点

#### 合适要使用异步组件 ####

> 加载大组件  
> 路由异步加载

#### 何时需要使用 keep-alive ####

> 缓存组件，不需要重复渲染  
> 如多个静态 tab 页的切换  
> 优化性能

#### 何时需要使用 beforeDestory ####

> 解绑自定义事件 event.$off  
> 清楚定时器  
> 解绑自己定义的 DOM 事件 ，如 window scroll 等

#### 什么是作用域插槽 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70_pic_center 4]

#### Vuex 中 action 和 mutation 有何区别 ####

> action 中处理异步 ，mutation 不可以  
> mutation 做原子操作  
> action 可以整合多个 mutation

#### Vue-router 常用的路由模式 ####

> hash 默认  
> H5 H+history （需要服务端支持）  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70_pic_center 5]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70]: /images/20221023/535503cdee5f44369048c4f8de59becf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 1]: /images/20221023/6f9f700bb53d4286ad894efebe5c827e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70_pic_center]: /images/20221023/c04d3af082d44dafad4a2604e4958df3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221023/5d9d91dfe6d842339ed4131c360e155a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221023/ddfec8a6167642489d5992be8f8414a4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221023/12039f46cf4c4f4b9251b22b947e894a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221023/f478a1cf7ec74bb8b9c9218c87efbf87.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221023/103f1102f6984c3caaf081b74ff512b3.png