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

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 组件生命周期（父子组件）

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

单组件生命周期图

父子组件生命周期关系

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

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

1 探究

探究的方法是：写一个有父子嵌套关系的组件，分别在他们的钩子函数中打印日志，观察执行顺序。得到的结果如图所示，父组件先创建，然后子组件创建；子组件先挂载，然后父组件挂载。

子组件挂载完成后，父组件还未挂载。所以组件数据回显的时候，在父组件mounted中获取api的数据，子组件的mounted是拿不到的。
仔细看看父子组件生命周期钩子的执行顺序，会发现created这个钩子是按照从外内顺序执行，所以回显场景的解决方案是：在created中发起请求获取数据，依次在子组件的created中会接收到这个数据。

2 结论

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

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

父子组件 props 和 this.$emit

自定义事件 , Event.$off 和 Event. $emit 和 Event.{这个位置放￥英文的}no
Vuex

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

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

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

MVVM 的理解

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

computed 有何特点

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

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

如果不是一个函数的话，每个组件的实例的data都是同一个引用数据，当该组件作为公共组件共享使用，一个地方的data更改，所有的data一起改变。如果data是一个函数，每个实例的data都在闭包当中，就不会各自影响了

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

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

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

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

如何组件实现 v-model

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

mixin
以及 mixin 的一些缺点

合适要使用异步组件

加载大组件
路由异步加载

何时需要使用 keep-alive

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

何时需要使用 beforeDestory

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

什么是作用域插槽

Vuex 中 action 和 mutation 有何区别

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

Vue-router 常用的路由模式

hash 默认
H5 H+history （需要服务端支持）