Vue 面试题

Vue 2 面试题

1 说说你对 vue 的理解?

开创性的使用 MVVM 模型 实现了单页面应用，数据驱动（MVVM），Vue 所有的界面事件，都是只去 操作数据 的，(Jquery 操作 DOM)，Vue 所有界面的变动，都是 根据数据自动绑定出来的，(Jquery 操作 DOM)，组件化，指令系统

让网页浏览更佳，让开发者无需再用 Jquery 操作 DOM了，真正使前后端实现了分离。

Vue 和 React 对比

这里就做几个简单的类比吧，当然没有好坏之分，只是使用场景不同

• 数据变化的实现原理不同。react 使用的是不可变数据，而 Vue 使用的是可变的数据
• 组件化通信的不同。react 中我们通过使用回调函数来进行通信的，而 Vue 中子组件向父组件传递消息有两种方式：事件和回调函数
• diff 算法不同。react 主要使用 diff 队列保存需要更新哪些 DOM，得到 patch 树，再统一操作批量更新 DOM。Vue 使用双向指针，边对比，边更新 DOM

2 说说你对双向绑定的理解?

双向绑定即 Model <=> ViewModel <=> View 数据变化后更新视图，视图变化后更新数据

单向绑定 Model => View 即页面View改变，VM 使 Module 也发生改变。

3 说说你对SPA（单页应用）的理解?

单页面应用就是，用户所有操作都在同一个 HTML 文件中完成，

而提到单页应用，就不得不将之与多页面应用比较：

	单页面应用（SPA）	多页面应用（MPA）
SEO 搜索引擎优化	难实现，可使用 SSR 方式改善	容易实现
url 模式	哈希模式	历史模式
刷新方式	局部刷新	整页刷新
数据传递	容易	通过 url、cookie、localStorage 等传递
组成	一个主页面和多个页面片段	多个主页面
维护成本	相对容易	相对复杂
页面切换	速度快，用户体验良好	切换加载资源，速度慢，用户体验差

这也带来了一个问题？

如何给 SPA 做 SEO 呢？

4 Vue中的 v-show 和 v-if 怎么理解？

它们都是 Vue 的指令语法。使用场景是为了实现控制元素的显示和隐藏的。其区别如下

	v-if	v-show
如何实现	元素不会渲染到页面	设置 display:none
使用场景	运行时条件很少改变	非常频繁地切换
性能开销	稍大	较小，直接操作 dom 节点增加与删除

5 Vue 实例挂载的过程中发生了什么?

new Vue 调用时，会调用 _init 方法，定义方法、事件、生命周期。之后执行render生成虚拟DOM，将虚拟DOM生成真实DOM结构，并且渲染到页面中。

6 说说你对 Vue 的生命周期的理解？

Vue 为了一些开发需要设置的方法钩子。4对生命周期，8个生命周期钩子。

其中重要的，如下

• created()
  可以通过 vm 访问到 data 中的数据、methods中配置的方法。
  发送 Api 请求
• mounted():
  Vue 完成模板解析，初始 DOM 已生成
  启动定时器等异步任务、绑定自定义事件、订阅消息、发送 Api 请求等
• beforeDestory():
  对 data 做的所有操作都不会触发更新了
  做收尾工作, 如: 清除定时器、清除订阅、解绑自定义事件等
• beforeUpdate() 数据是新的，页面是旧的
• updated() 数据是新的，页面也是新的

在created() 和在 mounted() 里写接口请求有什么区别？

在 mounted() 里写接口请求，因为DOM已经生成，所以可能会造成闪屏，用户体验不佳。

7 为什么Vue中的 v-if 和 v-for 不建议一起用?

用在同一个元素上时，每次渲染都会先循环再进行条件判断，会带来性能方面的浪费

  <template v-if="item.show == true">
    <li v-for="item in items" key="items.id">
      {{item.centent}}
    </li>
  </template>

如果条件出现在循环内部，可通过计算属性 computed 提前过滤掉那些不需要显示的项

那么为什么在vue2 中 v-for 会在 v-if 之间运行呢？ 我看过源码，v-for写的比 v-if 更提前，更早触发而已。

8 SPA（单页应用）首屏加载速度慢怎么解决?

首先分析可能的因素可能如下：网络延时问题、资源文件体积问题、资源是否重复发送请求去加载了等等
解决方案如下

• 减小入口文件积，动态加载路由文件
• 静态资源本地缓存，图片资源的压缩，图片懒加载
• UI框架按需加载
• 组件如果重复多次就打包，在webpack中设置
• 使用SSR服务端渲染，可使用 Next.js 实现服务端渲染

9 为什么data属性是一个函数而不是一个对象？

两者共用了同一个内存地址，componentA 修改的内容，同样对 componentB 产生了影响
如果我们采用函数的形式，则不会出现这种情况（函数返回的对象内存地址并不相同）

10 Vue中给对象添加新属性界面不刷新?

vue2 是用Object.defineProperty实现数据响应式，所以不允许在已经创建的实例上动态添加新的响应式属性
若想实现数据与视图同步更新，可采取下面三种解决方案
Vue.set Objet.assign() $forceUpdate()

11 Vue中组件和插件有什么区别

组件 (Component) 是用来构成你的 App 的业务模块，它的目标是 App.vue
插件 (Plugin) 是用来增强你的技术栈的功能模块，它的目标是 Vue (Vm)本身
简单来说，插件就是指对Vue的功能的增强或补充

12 Vue组件间通信方式都有哪些?

父 => 子	props 传递
子 => 父	ref、自定义事件
祖先 => 后代	Provide 与 Inject
无关系 vc	EventBus、Vuex、订阅发布

13 Vue中的 $nextTick 有什么作用？

想要在修改数据后立刻得到更新后的DOM结构，可以使用 Vue.nextTick(回调函数（可以获取最近的 DOM 结构）,执行函数上下文)

14 说说你对 vue 的 mixin 的理解，有什么应用场景？

Mixin类通常作为功能模块使用，在需要该功能时“混入”，有利于代码复用又避免了多继承的复杂

本质其实就是一个js vc对象，它可以包含我们组件中任意功能选项，如data、components、methods 、created、computed等等

15 说说你对slot的理解？slot使用场景有哪些？

Slot 艺名插槽，花名“占坑”，我们可以理解为solt在组件vc模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板vc中slot位置），作为承载分发内容的出口
父 => 子

如何使用

slot可以分来以下三种：

• 默认插槽
  子组件用<slot>标签来确定渲染的位置，标签里面可以放 DOM 结构，当父组件使用的时候没有往插槽传入内容，标签内 DOM 结构就会显示在页面

  父组件在使用的时候，直接在子组件的标签内写入内容即可

• 具名插槽
  父组件中在使用时在默认插槽的基础上加上 slot 属性，值为子组件插槽 name 属性值

• 作用域插槽
  子组件在作用域上绑定属性来将子组件的信息传给父组件使用，这些属性会被挂在父组件 v-slot 接受的对象上

父组件中在使用时通过 v-slot:（简写：#）获取子组件的信息，在内容中使用

小结

• v-slot 属性只能在<template>上使用，但在只有默认插槽时可以在组件标签上使用
• 默认插槽名为 default，可以省略 default 直接写 v-slot
• 缩写为#时不能不写参数，写成#default
• 可以通过解构获取v-slot={user}，还可以重命名v-slot="{user: newName}"和定义默认值v-slot="{user = '默认值'}"

16 Vue.observable 你有了解过吗？说说看

Vue.observable，让一个对象变成响应式数据。Vue 内部会用它来处理 data 函数返回的对象

使用场景 在非父子组件通信时，可以使用通常的 bus 或者使用 vuex，但是实现的功能不是太复杂，而使用上面两个又有点繁琐。这时，observable就是一个很好的选择

17 你知道 vue 中 key 的原理吗？说说你对它的理解？

key 是给每一个 vnode 的唯一id，也是 diff 的一种优化策略，可以根据 key，更准确， 更快的找到对应的vnode节点，设置key能够大大减少对页面的 DOM 操作，提高了 diff 效率

当我们在使用 v-for 时，需要给单元加上 key

18 怎么缓存当前的组件？缓存后怎么更新？说说你对keep-alive的理解是什么？

keep-alive 是vue中的内置组件，能在组件切换过程中 将状态保留在内存中，防止重复渲染DOM

19 Vue常用的修饰符有哪些？有什么应用场景？

在Vue中，修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理。

修饰符分为以下五种：

• 表单修饰符
  lazy
  trim
  number
• 事件修饰符
  stop
  prevent
  self
  once
  capture
  passive
  native
• 鼠标按键修饰符
  left 左键点击
  right 右键点击
  middle 中键点击
• 键值修饰符
  普通键（enter、tab、delete、space、esc、up...）
  系统修饰键（ctrl、alt、meta、shift...）
• v-bind修饰符
  async
  prop
  camel

常用重要的如下：

.stop：阻止事件冒泡
.native：绑定原生事件
.once：事件只执行一次
.self ：将事件绑定在自身身上，相当于阻止事件冒泡
.prevent：阻止默认事件
.caption：用于事件捕获
.once：只触发一次
.keyCode：监听特定键盘按下
.right：右键

20 你有写过自定义指令吗？自定义指令的应用场景有哪些？

我们看到的 v- 开头的行内属性，都是指令，不同的指令可以完成或实现不同的功能
使用自定义指令完成一些常用功能，防抖、图片懒加载、一键 Copy 的功能

关于自定义组件还有很多应用场景，如：拖拽指令、页面水印、权限校验等等应用场景

如何使用

21 Vue中的过滤器了解吗？过滤器的应用场景有哪些？

过滤器 vue3 已经废除了，因为实现成本和学习成本较高

22 什么是虚拟DOM？如何实现一个虚拟DOM？说说你的思路

实际上它只是一层对真实DOM的抽象，以JavaScript 对象 (VNode 节点) 作为基础的树，用对象的属性来描述节点，最终可以通过一系列操作使这棵树映射到真实环境上

23 了解过vue中的diff算法吗？说说看

24 Vue项目中有封装过axios吗？怎么封装的？

适度封装即可，遵循以下封装思路

请求头 来实现一些具体的业务，必须携带一些参数才可以请求(例如：传 Token)
状态码 根据接口返回的不同status ， 来执行不同的业务，这块需要和后端约定好
请求方法 没必要封，统一管理也不复杂
请求拦截器 根据请求的请求头设定，来决定哪些请求可以访问
响应拦截器 这块就是根据后端返回来的状态码判定执行不同业务

这篇文章写的很好，可以参考一下真没必要再对 axios 进行过度的封装

25 你了解Axios的原理吗？有看过它的源码吗？

主要是对 浏览器 HDR 请求做的封装

26 SSR解决了什么问题？有做过SSR吗？你是怎么做的？

SSR 全称 （Server-Side Rendering），意为服务端渲染

SSR 解决的问题

seo：搜索引擎优先爬取页面HTML结构，使用ssr时，服务端已经生成了和业务想关联的HTML，有利于seo
首屏呈现渲染：用户无需等待页面所有js加载完成就可以看到页面视图（压力来到了服务器，所以需要权衡哪些用服务端渲染，哪些交给客户端）

vue 的话 使用 Next.js 框架

27 说下你的Vue项目的目录结构，如果是大型项目你该怎么划分结构和划分组件呢？

28 Vue 要做权限管理该怎么做？控制到按钮级别的权限怎么做？

权限需要前后端结合，前端尽可能的去控制，更多的需要后台判断

路由方面，用户登录后只能看到自己有权访问的导航菜单，也只能访问自己有权访问的路由地址，否则将跳转 4xx 提示页
视图方面，用户只能看到自己有权浏览的内容和有权操作的控件

关于权限如何选择哪种合适的方案，可以根据自己项目的方案项目，如考虑路由与菜单是否分离

29 跨域是什么？Vue项目中你是如何解决跨域的呢？

30 Vue项目如何部署？有遇到布署服务器后刷新404问题吗？

使用docker部署nginx容器，将容器nginx映射到指定路径，将打包后的dist文件放到nginx映射的路径下，然后访问即可

404问题是由于 history 路由指向问题，在 nginx 里配置一下即可，路由交由前端处理

**对nginx配置文件.conf修改**

```json server { listen 80; server_name www.xxx.com; location / { index /data/dist/index.html; try_files $uri$uri/ /index.html; } } ```

前端路由配个 404 界面

const router = new VueRouter({
  mode: "history",
  routes: [{ path: "*", component: NotFoundComponent }],
});

31. 你是怎么处理 vue 项目中的错误的？

可能造成的错误原因包括： 后端接口错误 、代码中本身逻辑错误

接口错误封装 axios 拦截器的 response 进行拦截
代码逻辑，可以设置全局错误处理函数

32. Vue3 有了解过吗？能说说跟 Vue2 的区别吗？

Vue3的优化

性能提升
compositon Api
更好的Typescript支持

Vue 3 中需要关注的一些新功能包括：

framents 无需写根节点了
Teleport
composition Api
createRenderer

Vue3 系列

1. Vue3.0的设计目标是什么？做了哪些优化?

更小
更快
TypeScript支持
API设计一致性
提高自身可维护性
开放更多底层功能

2. Vue3.0 性能提升主要是通过哪几方面体现的？

3. Vue3.0 里为什么要用 Proxy API 替代 defineProperty API ？

解决对象添加元素无法实现响应式的问题,在Vue2中，增加了set、delete API，并且对数组api方法进行一个重写

4. Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同？

XXX

5. 说说Vue 3.0中Treeshaking特性？举例说明一下？

6. 用Vue3.0 写过组件吗？如果想实现一个 Modal你会怎么设计？

好，看看链接