前端面试基础（Vue知识梳理）

Vue知识梳理

博主整理Vue（2.X）常用知识点，便于理解和复习面试的查阅。
Vue3.X版本将会分开整理。

---

---

一、Vue原理

1.MVVM

数据驱动视图 - Vue MVVM；传统的组件，只要是静态渲染，更新需要频繁操作DOM；
这个的提出是想让开发者专注于业务逻辑，不再频繁操作DOM上。

2. Vue响应式

主要是两点：
①监听data 变化。
②组件渲染和更新的流程。
监听data变化的实现核心API: Object.defineProperty （2.X）;
Vue3.0启用Proxy (存在一定的兼容性问题)

3. 路由

3.1 hash 路由

特点：①hash变化会触发网页跳转—浏览器的前进、后退
②hash变化不会刷新页面，SPA必须
③hash不会提交到server端
④通过window.onhashchange监听

3.2 H5 history 路由

特点：①用url规范的路由，但跳转时不刷新页面，需要后端支持
②history.pushState
③onpropstate
两者的选择
to B系统推荐hash, 因为简单方便，对url规范不敏感。
to C 的系统可以选择H5 history, 但需要服务端支持。

---

4 Vue中key的作用原理

key的作用：（必须是key，且不能是index和random）
主要是为了高效的更新虚拟DOM,其原理是vue在patch过程中通过key可以精准判断两个节点是否是同一个(sameNode)，从而避免频繁更新不同元素，使得整个patch过程更加高效，减少DOM操作量，减少渲染次数，提高性能。

5 v-show和v-if

① v-show 通过CSSdisplay是否为none 进行控制显示和隐藏。
②v-if 是组件真正的渲染和销毁，而不是显示与隐藏。
③频繁切换显示状态用v-show，否则用v-if。

6 描述vue组件的生命周期

定义：生命周期就是物体从诞生到死亡的过程，vue生命周期就是vue从初始化到销毁的过程

简单总结：

beforeCreate	创建前：刚执行new的操作，其他什么都没有做。
created	创建后：属性和方法挂载到了实例上面，初始化事件，$el属性还没有显示。
beforeMount	挂载前：找到了el或者mount对应的节点范围，但数据还没有替换
mounted	挂载后：vue范围内的变量都会被替换成data里面的数据
beforeUpdate	数据更新前：根据更改之前的数据
updated	数据更新后：页面和数据保持同步，都是最新的。
beforeDestroy	销毁前：在实例销毁之前调用，实例仍然完全可用。
destroyed	销毁后：这个vue就不可以再用了，所有的事件监听器会被移除，所有的子实例也会被销毁

7 Vue组件如何通讯

父子组件：props和this.$emit
自定义事件: event.$no event.$off event.$emit
vuex: 组件状态管理。所有组件间都可以传递与同步消息。

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

9 双向数据绑定v-model实现原理

v-model 常用在input输入框元素上,以input框举例：

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

10 computed 有何特点

①具有缓存，data不变不会重新计算
②提高性能
区别于watch:

• 一般来说需要依赖别的属性来动态获得值得时候可以使用computed
• 对于监听到值的变化需要做异步操作或开销较大的操作时用watch

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

export default {
  name: 'app',
  data() {
    return {
      name: 'vue',
      list: ['a','b','c']
      }
    }
  }

可以把我们定义的vue组件是个class，当使用组件的时候相当于实例化。实例化后去执行data，若data不是函数，则每个组件的实例数据会被共享了。

12 ajax请求应当放在哪个生命周期中

moubted中。因为JS是单线程的，ajax异步获取数据。
mounted前JS没有渲染完，只会让逻辑更加混乱。

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

使用$props。
< User v-bind = “$props” />

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

使用 mixin

15 何时使用异步组件

① 加载大组件
② 路由异步加载

16 何时使用keep-alive

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

17 何时需要使用beforeDestory

① 解除自定义事件event.$off, 不解除会发生内存泄漏。
② 清除定时器。
③ 解绑自定义的DOM事件，如window scroll等。

18 Vue 如何监听数组变化

Object.defineProperty不能监听数组变化。
Proxy可以原生支持监听数组变化。

19 描述响应式原理

20 diff算法

①虚拟dom是对真实dom的一种映射，新旧Vnode比较同层级的节点，然后根据两者的差异只更新有差异的部分，生成新的视图，而不是对数进行逐层搜索遍历，因此时间复杂度O(n)。
②dom可以减少页面的回流与重绘，提升性能。

21 Vue 中$nextTick何用

①Vue中采用异步渲染（以及合并data修改），可以提高渲染性能。
②Vue中实现响应式并不是数据发生变化之后DOM立即进行变化，而是按照一定的策略进行DOM的更新。$nextTick在DOM更新完成之后，触发回调。

22 Vue 常见性能优化方式

①合理使用v-show和v-if。
② 合理使用computed。
③v-for时加key,避免和v-if同时使用，这是由于v-for的优先级更高，每次v-for时会重新计算v-if，是性能的一种浪费。
④自定义事件、DOM事件及时销毁，否则会导致内存泄漏。
⑤合理使用异步组件。
⑥合理使用keep-alive.
⑦data层级不应过深。由于深度监听是需要一次性遍历完成的，递归过深，可能导致页面卡顿。
⑧ 使用vue-loader在开发环境做模板编译（预编译）
⑨webpack层面的优化 待补充
⑩图片懒加载、SSR等通用的性能优化方式。

总结

提示：这里对文章进行总结：
未完待续啊