​

博主：初映CY的前说(前端领域)

个人信条：想要变成得到，中间还有做到！

本文核心：博主收集的关于vue2面试题

目录

vue2面试题

1、$route和 $router的区别

2、一个.vue文件由几部分组成，分别什么含义

3、scoped作用与原理

4、组件通信有哪些方式

5.为什么data属性是一个函数而不是一个对象

6、vue生命周期分为几个阶段，几个钩子函数，分别写出来

7、axios的请求方式

8、说出$nextTick的作用

9、如何实现组件缓存

10.MVVM与MVC的区别是什么

11.Vue常用修饰符有哪些

12.为什么避免v-for和v-if在一起使用

13.Vue中Key值作用

14.Vue中有时候数组会更新页面，有时候不更新为什么

15.计算属性与侦听器的区别

16.vue组件传值

17.vue中解决跨域做法

18.什么是虚拟 DOM

19.diff算法

20.slot用法

21.vue.use

22.自定义指令的用法

23.vue3对比vue2区别

24.路由守卫作用/对比axios拦截器

vue2面试题

1、$route和 $router的区别

$router 是VueRouter的实例，在script标签中想要导航到不同的URL,使用 $router.push方法

$route为router跳转对象，里面可以获取当前路由的name,path,query,parmas等。

2、一个.vue文件由几部分组成，分别什么含义

由三部分组成：

1.所需要渲染的区域

2.存放引入的资源与业务实现的数据与操作

3.存放界面css的样式

3、scoped作用与原理

作用：组件css作用域，避免子组件内部的css样式被父组件覆盖

  • 默认情况下，如果子组件和父组件css选择器权重相同，优先加载父组件css样式

原理：给元素添加一个自定义属性 v-data-xxxxx， 通过属性选择题来提高css权重值

4、组件通信有哪些方式

  1. 通过 props 传递
  2. 通过 $emit 触发自定义事件
  3. 使用 ref
  4. EventBus
  5. $parent 或$root
  6. attrs 与 listeners
  7. Provide 与 Inject
  8. Vuex

5.为什么data属性是一个函数而不是一个对象

根本原因：每次调用产生一个新的地址空间防止数据被污染

我们对象是引用类型数据，处理的是内存当中的地址。当我们引用data多个组件会对data的地址值进行更改。当我们data是函数的话，则会每次引用的时候都会返回一个新的的地址确保我们的数据不会被更改。

6、vue生命周期分为几个阶段，几个钩子函数，分别写出来

  • 初始化阶段: beforeCreate、 created
  • 挂载阶段 : beforeMount、mounted
  • 更新阶段 : beforeUpdate、updated
  • 销毁阶段: beforeDestroy、destroyed

具体关于vue生命周期的详情可移步看：

【vue2】vue生命周期的理解_初映CY的前说-CSDN博客

7、axios的请求方式

实现asios的二次封装https://blog.csdn.net/m0_61118311/article/details/129202465

  • get请求（常用于获取数据）
  • post请求（常用于提交表单数据和上传文件）
  • put请求（对数据进行全部更新）
  • patch请求（修改部分数据）
  • delete请求(常用于删除操作(参数可以放在url上也可以和post一样放在请求体中)

8、说出$nextTick的作用

Vue 是异步修改 DOM 的并且不鼓励开发者直接接触 DOM，但有时候业务需要必须对数据更改–刷新后的 DOM 做相应的处理，这时候就可以使用 Vue.nextTick(callback)来帮助我们处理更新后的dom数据。

9、如何实现组件缓存

使用标签，作用是创造一个缓存的空间，用于保存组件状态或者避免重新全部渲染。可以快速调用我们的缓存中的数据，从而达到提高访问速度。那常见的列表与购物车为例子，我们常常在这两个区域之间访问，每次点击不需要每次都重新渲染加载一次。

10.MVVM与MVC的区别是什么

MVC ： 传统的设计模式。M：model模型，V：View视图，C：controller控制器

MVVM：我们vue所用的设计模式，数据双向绑定，让数据自动地双向同步不需要操作dom。

  • M： model数据模型 (data里定义)
  • V： view视图 （页面标签）
  • VM： ViewModel视图模型 (vue.js源码)

11.Vue常用修饰符有哪些

.prevent: 提交事件不再重载页面；

.stop: 阻止单击事件冒泡；

.once: 只执行一次这个事件

.enter:监听键盘enter键

12.为什么避免v-for和v-if在一起使用

Vue 处理指令时，v-for 比 v-if 具有更高的优先级, 虽然用起来也没报错好使, 但是性能不高, 如果你有5个元素被v-for循环, v-if也会分别执行5次.

13.Vue中Key值作用

key值的作用是给元素添加一个唯一的标识符，提高vue渲染性能。当数据变化的时候，vue就会使用diff算法对比新旧虚拟Dom。 如果遇到相同的key值，则复用元素。如果遇到不同的key值则强制更新。

14.Vue中有时候数组会更新页面，有时候不更新为什么

因为vue内部只能监测到数组顺序/位置的改变/数量的改变, 但是值被重新赋予监测不到变更, 可以用 Vue.set() / vm.$set()

这些方法会触发数组改变, v-for会监测到并更新页面：

  • push()

  • pop()

  • shift()

  • unshift()

  • splice()

  • sort()

  • reverse()

这些方法不会触发v-for更新：

  • slice()

  • filter()

  • concat()

15.计算属性与侦听器的区别

点击跳转两者详解：【vue2】计算属性(computed)与侦听器(watch)详解_

(1)计算属性有缓存机制,侦听器没有

(2)计算属性不支持异步操作, 侦听器支持异步操作

(3)计算属性是一个额外新增的属性， 侦听器只能侦听data中的属性

(4)计算属性有返回值return,侦听器不需要return

(5)计算属性可以监听多个数据变化(计算属性内部用到的数据变化了，就会执行计算属性方法), 侦听器只能侦听一个数据的变化。

16.vue组件传值

父传子

  • 子组件props定义变量
  • 父组件在使用子组件时通过行内属性给props变量传值
  • 特点：单向数据流

子传父

  • 子组件：$emit触发父的事件
  • 父在使用组件用@自定义事件名=父的方法 (子把值带出来)
  • 特点：事件监听

非父子组件:使用vuex

17.vue中解决跨域做法

使用CORS （Cross-Origin Resource Sharing，跨域资源共享）是一个系统，它由一系列传输的HTTP头组成，这些HTTP头决定浏览器是否阻止前端 JavaScript 代码获取跨域请求的响应。

所谓同源（即指在同一个域）具有以下三个相同点

  • 协议相同（protocol）
  • 主机相同（host）
  • 端口相同（port）

反之非同源请求，也就是协议、端口、主机其中一项不相同的时候，这时候就会产生跨域。

点击可查看:跨域的解决办法 —CORS方法、同源策列的理解

18.什么是虚拟 DOM

虚拟DOM给我们带来了跨平台的能力。实际上它是一层对真实BOM的抽象，以js对象(VNode节点)作为基础的树，用对象的属性来描述节点，相当于在 js 和真实 dom 中间加来一个缓存，利用 dom diff 算法避免没有必要的 dom 操作，从而提高性能。最后通过一系列操作使这棵树映射到真实环境上。

vue中一般通过state状态变化来进行编译，底层实现可以理解为三个步骤：

1.用js对象对象结构表述DOM树的结构，根据这个树构建一个真正的DOM树，插到浏览器页面中。

2.当我们状态改变之后，也就是state做出修改，vue便会重新构造一棵树的对象树，并且会进行同层对比，记录两棵树之间的差异。

3.把记录的差异再重新应用到所构建的真正的 dom 树，视图就更新了。

它的表达方式就是把每一个标签都转为一个对象，这个对象可以有三个属性：tag（标签）、props、children。

19.diff算法

Diff 算法是一种对比算法。对比两者是 旧虚拟 DOM 和新虚拟 DOM，对比出是哪个 虚拟节点更改了，找出这个 虚拟节点并只更新这个虚拟节点所对应的 真实节点而不用更新其他数据没发生改变的节点，实现 精准地更新真实 DOM，进而 提高效率

在新老虚拟 DOM 对比时：

  • 首先，对比节点本身，判断是否为同一节点，如果不为相同节点，则删除该节点重新创建节点进行替换
  • 如果为相同节点，进行 patchVnode，判断如何对该节点的子节点进行处理，先判断一方有子节点一方没有子节点的情况(如果新的 children 没有子节点，将旧的子节点移除)
  • 比较如果都有子节点，则进行 updateChildren，判断如何对这些新老节点的子节点进行操作（diff 核心）。
  • 匹配时，找到相同的子节点，递归比较子节点

20.slot用法

slot 是插槽,一般在组件内部使用

在封装组件时,在组件内部不确定该位置是以何种形式的元素展示时,,我们可以通过 slot 占据这个位置,该位置的元素需要其他组件以内容形式传递过来.

slot 又分为:默认插槽,具名插槽,作用域插槽（前两者父传子，后者是子传父）

21.vue.use

  • 【是什么】：Vue.use 是用来注册 Vue 插件的一个函数。

  • 【怎么用】：可以传递是一个对象，必须提供 install 方法。也可以传递一个函数，它会被作为 install 方法，install 方法调用时，会将 Vue 作为参数传入。

  • 【注意点】：该方法需要在 new Vue() 之前被调用；当 install 方法被同一个插件多次调用，插件将只会被安装一次。

  • 【场景】：通常用来为 Vue 添加全局功能，例如添加全局方法或 property、添加全局指令、注入组件选项、添加实例方法等。

22.自定义指令的用法

  • 【作用是什么】：可以对普通 DOM 进行底层操作，例如聚焦输入框。

  • 【怎么用】：可以通过 Vue.directive 全局注册一个指令，或者组件内部通过 directives 进行局部注册，它常用的钩子有 inserted，表示被绑定元素插入父节点时调用，还有 update，它表示指令所在组件的 VNode 更新时调用。

  • 【场景】：我在实际项目中，当用户没长传图片时，可以给图片设置一个默认的src属性等。

  • 自定义指令封装：https://blog.csdn.net/m0_61118311/article/details/129179354

23.vue3对比vue2区别

  1. 性能更高了，主要得益于响应式的原理换成了 proxy，VNode diff 的算法进行了优化。

  2. 体积更小了，删除了一些没必要或不常用到的 API，例如 filter、EventBus 等；按需导入，能配合 Webpack 支持 Tree Shaking。

  3. 对 TS 支持更好，因为它本身源码就是用 TS 重写的。

  4. Composition API（组合 API），相比较 Vue2 的 options api，对于开发大型项目更利于代码的复用和维护。

  5. 新特性，例如 Fragment、Teleport、Suspense 等。

24.路由守卫作用/对比axios拦截器

路由的理解：

https://blog.csdn.net/m0_61118311/article/details/128750396

刚开始接触路由导航守卫你会发现和axios拦截器有点像，实际上它们是两个不同的东西。

1.相同点

(1)都是钩子函数(回调函数的一种,到某个时机了自动触发)

(2)都是起到拦截作用

2.不同点

(1)功能不同 ：axios拦截器拦截网络请求, 导航守卫拦截路由跳转

(2)应用场景不同 :

axios拦截器一般用于发送token

导航守卫用于页面跳转权限管理(有的页面可以无条件跳转,例如登录注册页可以无条件跳转。有的页面需要满足条件才能跳转，例如购物车页面就需要用户登录才可以跳转)