2023-前端vue面试题相关

1、MVVM与MVC最大的区别

- 实现了View和Model的自动同步，当Model的属性改变时，该属性对应的View层显示会自动改变
- 简化了业务与界面的依赖，解决了数据频繁更新的问题，不用使用选择器操作DOM元素

2、VUE中为什么data是一个函数

- 组件的data写成一个函数，数据以函数返回值形式定义
- 每复用一次组件，就会返回一分新的data，让各个组件实例维护各自的数据。

3、Vue组件通讯有哪些方式？

- props 和 $emit。父组件向子组件传递数据是通过props传递的，子组件传递给父组件是通过$emit触发事件来做到的。
- $parent 和 $children 获取单签组件的父组件和当前组件的子组件。
- $refs 获取组件实例
- 父传子孙：provide 和 inject
- vuex 状态管理（实现不同组件之前的数据共享）

4、Vue的生命周期方法有哪些？

- beforeCreate 初始化实例前（在当前阶段 data、methods、computed 以及 watch 上的数据和方法都不能被访问。）
- created 实例创建完成之后被调用
- beforeMount 挂载开始之前被调用（相关的 render 函数首次被调用）
- mounted 挂载之后 （在当前阶段真实的DOM挂载完毕，数据完成双向绑定，可以访问DOM节点）
- beforeUpdate 数据更新前调用 （不会触发重新渲染过程）
- updated 更新完成之后
- beforeDestory 实例销毁之前调用
- destroyed 实例销毁之后调用 （Vue实例指示的东西都会解绑，所有事件监听移除）
- activated keep-alive专属，组件被激活时调用
- deactivated keep-alive专属，组件被销毁是调用

5、在哪个生命周期内调用异步请求？

- 可以在钩子函数 created、beforeMount、mounted 中进行异步请求，
- 因为在这三个钩子函数中，data已经创建，可以将服务器端返回的数据进行赋值。

6、Vue 的单项数据流

- 数据总是从父组件传递到子组件，子组件没有权利修改从父组件传过来的数据，只能请求父组件对原始数据进行修改。

7、computed 和 watch 的区别和运用的场景。

- computed 是计算属性，依赖其他属性计算值，并且computed的值具有缓存性，当计算值发生变化时才会返回内容。
- watch 监听到值得变化就会调用。

8、Vue 2.0 响应式数据的原理

- 整体思路是 数据挟持 + 观察者模式
 (1)、Object.defineProperty 数据挟持
 (2)、使用getter挟持依赖，setter通知watcher派发更新
 (3)、watcher发布订阅模式

9、vue-router 路由函数钩子及生命周期

- 全局守卫、路由守卫、组件守卫
- 生命周期：
	（1）、全局守卫 & 路由守卫--> beforeEach、beforeReslove、afterEach、beforeEnter
	（2）、组件内路由守卫--> beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

10、Vuex

- vuex可以实现不同组件之间的状态共享
- vuex可以实现组件内数据的持久化
- vuex的核心概念
	（1）、state：设置初始值
	（2）、getter：允许组件从state中获取数据
	（3）、Mutation：修改state中状态的方法，且必须是同步函数
	（4）、Action：用于提交mutation，可以包含任何异步请求
	（5）、Module
- vuex流程
	在vue组件里面，通过dispatch来触发actions提交修改数据的操作，
	然后通过actions的commit触发mutations来修改数据，mutations接收到commit的请求，就会
	自动通过mutate来修改state，最后由store触发每一个调用它的组件的更新。

11、Vue 的性能优化

- 不需要响应式的数据不要放在 data 中
- v-if 和 v-show 区分使用场景
- computed 和 watch 区分场景使用
- v-for 遍历必须加 key，key最好是id值，且避免同时使用 v-if
- 大数据列表和表格性能优化 - 虚拟列表 / 虚拟表格
- 图片懒加载
- 路由懒加载
- SPA 页面采用keep-alive缓存组件
- key保证唯一
- 第三方模块按需导入
----
- 预渲染
- 服务端渲染SSR
----
- 压缩代码
- 使用cdn加载第三方模块
----
- 骨架屏
- PWA

12、Vue 修饰符有哪些？

- .stop 阻止事件继续传播
- .prevent 阻止标签默认行为

13、v-model 的修饰符

- .lazy 通过这个修饰符，转变为在 change 事件再同步
- .number 自动将用户输入值转化为数值类型
- .trim 自动过滤用户输入的收尾空格

14、Vue 模板编译原理

- Vue 的编译过程就是将 template 转化为 render 函数的过程，分为以下三步：
	第一步是将 模板字符串转换成 element ASTs（解析器）
	第二步是对 AST 进行静态节点标记，主要用来做虚拟 DOM 的渲染优化（优化器）
	第三步是 使用element ASTs 生成 render 函数代码字符串（代码生成器）

15、双向绑定的原理是什么？

- 数据层（Model）：应用的数据及业务逻辑
- 视图层（View）：应用的展示效果，各类 UI 组件
- 业务逻辑层（ViewModel）：框架封装的核心，它负责将数据与视图关联起来

16、vue的理解

- vue是一套构建用户界面的渐进式的MVVM框架
- vue的核心是关注视图层
- vue的核心思想是数据驱动和组件化

17、vue首屏加载慢的原因，解决方案，怎么解决白屏问题

- 首屏加载慢原因：第一次加载页面有很多组件数据需要渲染
- 解决方案：
	（1）路由懒加载
	（2）UI组件按需加载
	（3）gzip按需加载
- 解决白屏：
	（1）使用v-text渲染数据
	（2）使用{{}}语法渲染数据，同时使用v-cloak指令

18、说说你对spa单页面的理解

- spa仅在web页面初始化的时候加载html、js、css
- 页面一旦加载完成就不会因为用户的操作而进行页面的重新加载和渲染
- 页面的变化是利用路由机制实现html内容的变换，避免页面的重新加载

19、SPA首屏加载速度慢的怎么解决？

- 加载慢的原因
	1、网络延时问题
	2、资源文件体积是否过大
	3、资源是否重复发送请求去加载了
	4、加载脚本的时候，渲染内容堵塞了
	
- 常见的几种SPA首屏优化方式
	1、减小入口文件积
	2、静态资源本地缓存
	3、UI框架按需加载
	4、图片资源的压缩
	5、组件重复打包
	6、开启GZip压缩
	7、使用SSR

20、为什么vue采用异步渲染

- vue是组件级更新，当前组件里的数据变了，它就会去更新这个组件。
  当数据更改一次组件就要重新渲染一次，性能不高，为了防止数据一更新就更新组件，所以做了个异步更新渲染。
-（核心的方法就是nextTick）

21、Vue 的异步更新机制是如何实现的？

- Vue 的异步更新机制的核心是利用了浏览器的异步任务队列来实现的，首选微任务队列，宏任务队列次之。

22、第一次页面加载会触发哪几个钩子？

- 第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

23、虚拟 DOM 的优点缺点：

- 优点：
	（1）、可以减少DOM操作
	（2）、能跨平台渲染
- 缺点：
	需要额外的创建函数，如 createElement 或 h，但可以通过 JSX或者vue-loader 来简化成 XML 写法。
	但是这么做会依赖打包工具。

24、keep-alive用法

- 用include和exclude来区分哪些要或不要缓存
- max用于控制最大缓存数量，满了的话，回把最旧的一个挤掉
- activated和deactivated，活跃和不活跃钩子（生命周期）

25、为什么vue3 改用proxy？

- Object.defineProperty 只能遍历对象属性进行劫持
- Proxy 直接可以劫持整个对象，并返回一个新对象
- Proxy 可以直接监听数组的变化
- Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等
- Proxy 返回的是一个新对象

26、比较vue2和vue3响应式

- vue2的响应式
	- 核心:
		对象: 通过defineProperty对对象的已有属性值的读取和修改进行劫持(监视/拦截)
		数组: 通过重写数组更新数组一系列更新元素的方法来实现元素修改的劫持
	
	- 问题：
		对象直接新添加的属性或删除已有属性, 界面不会自动更新
		直接通过下标替换元素或更新length, 界面不会自动更新 arr[1] = {}

-Vue3的响应式
	-核心:
		通过Proxy(代理): 拦截对data任意属性的任意(13种)操作, 包括属性值的读写, 属性的添加, 属性的删除等...
		通过 Reflect(反射): 动态对被代理对象的相应属性进行特定的操作
		文档:
		https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy
		https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect

27、与 2.x 版本生命周期相对应的组合式 API

- beforeCreate -> 使用 setup()
- created -> 使用 setup()
- beforeMount -> onBeforeMount
- mounted -> onMounted
- beforeUpdate -> onBeforeUpdate
- updated -> onUpdated
- beforeDestroy -> onBeforeUnmount
- destroyed -> onUnmounted
- errorCaptured -> onErrorCaptured