Vue之高频前端面试题汇总（上）

目录

一、Vue 基础

1. Vue的基本原理

2. 双向数据绑定的原理

3. 使用 Object.defineProperty() 来进行数据劫持有什么缺点？

4. MVVM、MVC、MVP的区别

5. Computed 和 Watch 的区别

6. Computed 和 Methods 的区别

7. slot是什么？有什么作用？原理是什么？

8. 过滤器的作用，如何实现一个过滤器

9. 如何保存页面的当前的状态

10. 常见的事件修饰符及其作用

11. v-if、v-show、v-html 的原理

13. v-if和v-show的区别

14. v-model 是如何实现的，语法糖实际是什么？

15. v-model 可以被用在自定义组件上吗？如果可以，如何使用？

16. data为什么是一个函数而不是对象

17. 对keep-alive的理解，它是如何实现的，具体缓存的是什么？

18. $nextTick 原理及作用

19. Vue 中给 data 中的对象属性添加一个新的属性时会发生什么？如何解决？

20. Vue中封装的数组方法有哪些，其如何实现页面更新

21. Vue 单页应用与多页应用的区别

22. Vue template 到 render 的过程

23. Vue data 中某一个属性的值发生改变后，视图会立即同步执行重新渲染吗？

24. 简述 mixin、extends 的覆盖逻辑

25. 描述下Vue自定义指令

26. 子组件可以直接改变父组件的数据吗？

27. Vue是如何收集依赖的？

28. 对 React 和 Vue 的理解，它们的异同

29. Vue的优点

30. assets和static的区别

31. delete和Vue.delete删除数组的区别

32. vue如何监听对象或者数组某个属性的变化

33. 什么是 mixin ？

34. Vue模版编译原理

35. 对SSR的理解

36. Vue的性能优化有哪些

37. 对 SPA 单页面的理解，它的优缺点分别是什么？

38. template和jsx的有什么分别？

39. vue初始化页面闪动问题

40. extend 有什么作用

42. MVVM的优缺点?

二、生命周期

1. 说一下Vue的生命周期

2. Vue 子组件和父组件执行顺序

3. created和mounted的区别

4. 一般在哪个生命周期请求异步数据

5. keep-alive 中的生命周期哪些

三、组件通信

（1） props  /   $emit

（2）eventBus事件总线（$emit / $on）

（3）依赖注入（provide / inject）

（3）ref / $refs

（4）$parent / $children

（5）$attrs / $listeners

（6）总结

---

一、Vue 基础

1. Vue的基本原理

当一个Vue实例创建时，Vue会遍历data中的属性，用 Object.defineProperty（vue3.0使用proxy ）将它们转为 getter/setter，并且在内部追踪相关依赖，在属性被访问和修改时通知变化。 每个组件实例都有相应的 watcher 程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。

2. 双向数据绑定的原理

Vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。主要分为以下几个步骤：

1. 需要obs