vue面试题

1.vue指令 及其作用

v-cloak: 在vue加载完毕之前有v-cloak这个指令的，当vue加载完毕之后v-cloak这个指令就消失了

v-cloak: 解决了当网速比较慢的时候，页面闪烁的问题

v-text: 不解析html标签；v-html：解析html标签的

<!-- v-pre：跳过编译信息，几乎不用 -->

<!-- v-once：只编译一次,几乎不用 -->

<!-- v-on： 用来绑定事件的，可以简写成@ -->

<!-- 语法格式：v-on:事件类型="事件处理函数" -->

<!-- v-show的值为true时，元素显示；否则隐藏 -->

<!-- v-model:只能用在表单元素上 -->

    <!-- v-model实现了数据和视图的双向绑定 -->

<!-- v-bind：用来绑定属性的，可以简写成冒号（:） -->

    <!-- 语法格式：v-bind:属性 -->

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

单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的Web 应用。它将所有的活动局限于一个 Web 页面中，仅在该 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成了，SPA 不会因为用户的操作而进行页面的重新加载或跳转。取而代之的是利用 JavaScript 动态的变换 HTML 的内容，从而实现 UI 与用户的交互。由于避免了页面的重新加载， SPA 可以提供较为流畅的用户体验。得益于 ajax，我们可以实现无跳转刷新，又多亏了浏览器的 histroy 机制，我们可以用 hash 的变化来推动界面变化，从而模拟元素客户端的单页面切换效果。

当然任何东西都有两面性，以下是总结目前 SPA 的一些优缺点：

它的优点有三点：

（1）良好的交互式体验，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；

（2）基于上面所说，SPA 对服务器的压力小；

（3）前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理。

它的缺点有四点：

（1）初次加载耗时多，为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载（可以使用路由懒加载解决）

（2）由于单页应用在一个页面中显示，所以不可以使用浏览器自带的前进后退功能，想要实现页面切换需要自己进行管理

（3）SEO 难度较大，由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。

(4).有兼容性问题，部分平台不支持pushstate

3.说说你对插槽的理解

插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模

板代码，如 HTML 、组件等，填充的内容会替换子组件的标签。

vue 插槽分为

默认插槽

作用域插槽

匿名插槽

4.说一下你对vue过滤器的理解

1 、过滤器分为局部过滤器和全局过滤器

2 、过滤器函数中的 value 就是 | 前面的值，它相当于第一个参数

3 、在过滤器函数中一定要返回一个值，他就是我们对格式化处理后的结果

4 、通俗的来讲，当一个数据绑定一个过滤器后，每一次数据渲染这个数据的时候，他都会调用相对应过

滤器的函数

5.说一下vue数据改变视图不更新有哪几种情况，及解决方式

1. 分为两种情况：①数组通过下标修改元素②对象通过 key 添加元素

2. 解决方案： Vue.set() 或者 this.$set()

3. 语法格式： Vue.set( 数组 / 对象，数组的下标 / 对象的 key ，要替换的数据 )

6.vue生命周期的理解

1. 概念： vue 组件从创建到销毁的过程叫做生命周期。在不用的阶段给我们提供了不同的钩子的函

数，方便我们对不同阶段进行相关操作

2. 不同的生命周期函数函数

创建阶段

beforeCreat : 在 vue 实例初始化之间执行

created : vue 实例已经初始化完毕了。可以请求数据

} 挂载阶段

beforeMount : 虚拟 dom 和真实 dom 将要结合的阶段

mounted ：挂载完毕（虚拟 dom 和真实 dom 已经结合完毕），可以操作 dom 了

更新阶段

beforeUpdate : 更新前

updated ：更新完成

销毁阶段

beforeDestroyed : 销毁前

destroyed : 销毁后

3. 在项目中的应用

一般情况下经常在 created 这个生命周期函数中，请求数据；

在 mounted 中进行原生事件的绑定及进行 dom 相关操作

在 destroyed 中经常会清理一些页面残留的垃圾。例如：清除不同的事件、定时器、闭包等

7.事件

1. 事件绑定的指令： v - on, 简写成 @

2. 事件传参及事件对象的获取

1 》事件传参： @click="fn(3,4)"

2 》事件对象 :

1 ）事件处理函数没有参数：事件处理函数的第一个参数就是事件对象

2 ）事件处理函数有参数：在事件处理函数的实参中传递 $event 这个 vue 中系统变量

8.修饰符

事件修饰符：

1 》 .stop: 阻止冒泡

2 》 .prevent ：阻止默认行为

3 》 .once: 只调用一次

4 》 .self: 当调用自身的时候触发

5 》 captrue: 从当前触发的事件开始依次往下执行

按键修饰符：

1 ） .enter

2 ） .up

3 ） .down

4 ） .left

5 ） .right

9.如何创建组件、注册组件、使用组件？

1. 创建组件：创建一个 .vue 文件，将 html,css,js 写进去，每个 .vue 文件就是一个组件。

2. 注册组件： import 组件对象 from ‘ 组件 vue 文件路径 ’

3. 使用组件：将注册好的组件当成标签来使用

10.如何理解组件化开发、模块化开发、工程化开发？

1. 组件化开发，其实就是针对一个案例，根据功能来划分成不同的组件（一个根组件），减少代码的

复用。

2. 模块化开发，是将一些相关连的方法属性等都封装到一个单独的模块里面，谁都可以都调用。用的

时候引入模块就行。

3. 工程化开发，定义一个具有一些属性和方法的工厂函数，然后可以批量化生产出来多个实例，每个

实例都继承工厂函数的属性和方法。

11.如何使用props实现父子之间的传值？

1. 父传子：

父子件给调用的子组件绑定一个自定义属性，自定义属性的值就是父子件要传递给子组件的数

据。

子组件通过 props 属性接收父组件传递过来的数据

子组件渲染接收父组件传递过来的数据

2. 子传父：

子组件通过 $emit(‘ 自定义事件 ’,’ 传递数据 ’) 方法向父组件派发一个自定义事件

父组件触发子组件通过 $emit 派发的自定义事件

在父组件中定义事件函数，并接收传递过来的参数

12.兄弟组件之间传值(你对eventBus，事件搭桥的理解)

1. 在 main.js 中创建一个空的 Vue 实例对象，并挂载在 Vue.prototype 上

2. 在兄弟一组件中通过调用挂载原型上的空的 Vue 实例对象上的 $emit 方法来派发一个自定义事件，

传递参数

3. 在兄弟一组件中通过调用挂载原型上的空的 Vue 实例对象上的 $on 方法来触发兄弟一派发的自定义

事件，事件处理函数的参数就是兄弟一传递过来的值

13.localstorage 和sessionStorage 的区别？

1. localstorage 和 sessionStorage 都是存储在客户端的，不与服务端交互；存储大小都是

5MB ；存储的都是字符串。

2. localstorage 是永久存储，只有当手动删除数据时，数据才会销毁。

3. sessionStorage 是会话存储，当浏览器关闭，数据就会销毁。

14.定义时，data为什么一定是函数？

1. 便于组件之间的数据传递，因为函数有 return;

2. 有时候定义的数据比较大，或者要对数据进行类型验证，在函数里可以更好的实现。

15.说说你对vuex的理解

1 》 Vuex 是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。

vuex 的优缺点

优点：

1. 能够在 vuex 中集中管理共享的数据，易于开发和后期维护

2. 能够高效地实现组件之间的数据共享，提高开发效率

3. 存储在 vuex 中的数据都是响应式的，能够实时保持数据与页面的同步

缺点：

1. 刷新页面，数据重新渲染

2. 使用不当，很容易造成数据混乱

16.单项数据流

向数据流（ Unidirectional data flow ）方式使用一个上传数据流和一个下传数据流进行双向数据通

信，两个数据流之间相互独立。单向数据流指只能从一个方向来修改状态。

17.vuex的五大核心属性及对应的映射函数

1. state=> 存储基本数据 ---------------------------MapState

2. getters => 从 state 基本数据派生出的数据 ------------------MapGetters

3. mutations => Store 中更改 state 数据状态的唯一方法。 ------------------------Mapmutations

4. actions=> 请求 API 方法获取后台数据，然后回调函数提交 mutaions 方法更改 state 数据状态，使之

异步。 Mapactions

5. modules => 模块化 Vuex----------------------Mapmodules

18.说说你对$nextTick 的理解

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM

19.前端路由的模式有几种前端路由的模式有几种？分别是什么

三种， hash 模式、 memory 模式、 history 模式 vue - router

20.路由原理

实现 vue - router 分为两种模式：

1 、 hash 模式基于锚点，以及 onhashchange 事件。

2 、 history 模式是基于 HTML5 中的 history 模式。 history.pushState 、 replaceState 在 IE10

以后才支 持，存在兼容性问题。 push 会向服务器发送请求，使用 pushState 不会发送请求，但是会

在浏览器端产生 历史记录，形成客户端路由。

21.route和router的区别？

$route 是 " 路由信息对象 " ，包括 path ， params ， hash ， query ， fullPath ， matched ， name 等路由

信息参数。而 $router 是 " 路由实例 " 对象包括了路由的跳转方法，钩子函数等。

22.说说你对keep-alive的理解（两个生命周期函数）

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

keep-alive 包裹动态组件时，会缓存不活动的2组件实例，而不是销毁它们

keep-alive 可以设置以下 props 属性：

include - 字符串或正则表达式。只有名称匹配的组件会被缓存

exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存

max - 数字。最多可以缓存多少组件实例

23.什么是路由懒加载？作用是什么？

1. 路由懒加载：

整个网页默认是刚打开就去加载所有页面，路由懒加载就是只加载你当前点击的那个模块

2. 作用：延时加载，在需要它的时候才进行加载

简述路由的懒加载如何配置 作用是什么：

const routes = [

  {

    path: '/home',

    component: () => import('../components/home')

  }

]

减少首屏加载时间，优化代码的性能

24.简述vuex完整的的执行流程？

（1）通过dispatch去提交一个actions

（2）actions接收到这个事件之后，在actions中可以执行一些异步|同步操作，根据不同的情况去分发 给不同的mutations

（3）actions通过commit去触发mutations

（4）mutations去更新state数据，state更新之后，就会通知vue进行渲染

25.简述vuex中分为哪几部分？ 每个部分的作用是什么

（1）state（数据）：用来存放数据源，就是公共状态

（2）getters（数据加工）：有的时候需要对数据源进行加工，返回需要的数据

（3）actions（事件）：要执行的操作，可以进行同步或者异步事件

（4）mutations（执行）：操作结束之后，actions通过commit更新state数据源

（5）modules：使用单一状态树，致使应用的全部状态集中到一个很大的对象，所以把每个模块的局部状 态分装使每一个模块拥有本身的 state、mutation、action、getters、甚至是嵌套子模块

26.简述路由两种模式的优缺点

 

 

27.前端路由和后端路由的区别

1.映射关系不同。前端路由是一个路径映射一个组件，后端路由是一个路径映射一个处理本次请求的响应函教2.前端路由不需要走网络，而后端路由需要走网络。
3.前端路由切换页面不会使得网页刷新，后端路由切换页面会导致网页刷新4.前端路由采用的是客户端渲染，后端路由是服务端渲染。 

28.vue项目前端开发环境请求服务器接口跨域问题如何解决？多种方式

1.使用 webpack-dev-server 的 proxyTable 配置: 在 config/indexjs 文件中，设置dev.proxyTable 届性将 API 请求代理到指定的后端服务器上

2.在Node.js 后端服务中添加 CORS (跨域资源共享)配置: 在后端应用中添加 CORS中间件，以允许来自其他域的请求访问该服务。

3.修改服务器端返回的响应头部信息: 在服务器端设置正确的响应头部信息，如 AccessControl-Allow-Origin、Access-Control-Allow-Headers 等

4.使用JSONP 跨域方式: JSONP 可以通过动态创建 script 标签实现跨域请求，但需要服务器端支持。

5.使用 WebSocket 协议: Websocket 协议不受同源策略限制，可以实现跨域通信.

29.定义组件时 为什么不能定义template选项 

template选项要想起作用必须借助脚手架进行编译才可以执行，而在运行时的vue中是没有脚手架的，所以处理不了template选项

30.如何理解token？简述使用token进行认证的实现思路：

什么是token :

Token是用户身份的验证方式，通常叫它：令牌。当用户第一次登录后，服务器生成一个Token并将此Token返回给客户端，以后客户端只需带上这个Token前来请求数据即可，无需再次带上用户名和密码。

token进行认证的实现思路:

1, 客户端使用用户名和密码请求登录；

2, 服务端收到请求，去验证用户名与密码；

3, 验证成功后，服务端会签发一个 Token，再把这个 Token 发送给客户端；

4, 客户端收到 Token 以后可以把它存储起来，比如放在 Cookie 里或者 Local Storage 里；

5, 客户端每次向服务端请求资源的时候需要带着服务端签发的 Token；

6, 服务端收到请求，然后去验证客户端请求里面带着的 Token，如果验证成功，就向客户端返 回请求的数据；

 

31.vue-router中路由守卫分别用在哪些应用场景中 举例说明？

Vue 路由导航守卫(全局守卫、路由独享守卫、组件内守卫)详解

一 全局守卫: 是指路由实例上直接操作的钩子函数，特点是所有路由配置的组件都会触发，直白点就是触发路由就会触发这些钩子函数

全局前置守卫 beforeEach（to，from， next）在路由跳转前触发，这个钩子作用主要是用于登录验证，也就是路由还没跳转提前告知，以免跳转了再通知就为时已晚

全局解析守卫 beforeResolve（to，from， next）这个钩子和beforeEach类似，也是路由跳转前触发，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，即在 beforeEach 和 组件内beforeRouteEnter 之后，afterEach之前调用

全局后置守卫 afterEach（to，from）和beforeEach相反，它是在路由跳转完成后触发，对于分析、更改页面标题、声明页面等辅助功能以及许多其他事情都很有用。不会接受 next函数，也不会改变导航本身。它发生在beforeEach和beforeResolve之后，beforeRouteEnter（组件内守卫）之前。这些钩子不会接受next函数也不会改变导航本身

二 独享守卫: 是指在单个路由配置的时候也可以设置的钩子函数

路由独享守卫 beforeEnter（to，from， next）和beforeEach完全相同，如果两个都设置了，beforeEnter则在beforeEach之后紧随执行。在路由配置上直接定义beforeEnter守卫。独享守卫没有后置，可以全局后置路由守卫搭配使用

三 组件守卫: 组件内直接定义路由导航守卫组件内守卫又分为进入守卫和离开守卫

是指在组件内执行的钩子函数，类似于组件内的生命周期，相当于为配置路由的组件添加的生命周期钩子函数

组件进入守卫 beforeRouteEnter（to，from， next），通过路由规则进入该组件时被调用，进入守卫不能访问this，因为守卫在导航确认前被调用，因此即将登场的新组件还没被创建。可以通过传一个回调给 next 来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。

该钩子在全局守卫beforeEach和独享守卫beforeEnter之后，全局beforeResolve和全局afterEach之前调用，要注意的是该守卫内访问不到组件的实例，也就是this为undefined。因为它在组件生命周期beforeCreate阶段触发，此时的新组件还没有被创建。在这个钩子函数中，可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数

组件更新守卫 beforeRouteUpdadte（to，from， next）
在当前路由改变时，并且该组件被复用时调用，可以通过this访问实例

组件离开守卫 beforeRouteLeave（to，from， next），通过路由规则离开该组件时被调用，

离开守卫通常用来预防用户在还未保存修改前突然离开。该导航可以通过返回 false 来取消
导航离开该组件的对应路由时调用，可以访问组件实例this。这个离开守卫通常用来禁止用户在还未 保存修改前突然离开。该导航可以通过next( false )来取消

32.什么是全局事件总线？如何使用全局事件总线？

是一种组件之间能够互相通讯的方式，如果组件之间想要通讯，必须产生强烈依赖性，但是强依赖不利于整体程序运行，全局事件总线可以实现子组件与父组件之间的通讯，而不产生依赖性

用法：确定好父组件与子组件，相应组件中绑定好自定义事件，假如绑定在第一个组件中，绑定完成后，安装事件总线并进行数据接收，然后提供数据，接收完数据，解绑事件

 

33.本地存储有几种方式？ 区别是什么？

1. cookie一般由服务器生成，可以设置过期时间
2. localStorage除非被清理，否则一直在
3. session Storage页面关闭就清理
4. index DB除非清理，否则一直在

34.简述vuex完整的的执行流程？ 

1. 通过dispatch去提交一个actions
2. Actions接收这个事件以后在actions中执行一些操作，根据不同情况去分发给不同的mutations
3. actions通过commit去触发mutations
4. mutations去更新state数据，state更新后，通知vue进行渲染

35.如何理解组件化开发、模块化开发、工程化开发 

组件化开发就是针对一个案例根据功能划分成不同的组件，减少代码复用，独立性强

模块化开发，是将一些相关联的方法属性都封装到一个单独的模块里，谁都可以调用，位于业务框架层，模块之间通过接口来调用

工程式开发，定义一个具有一些属性和方法的工厂函数，然后可以批量化生产多个实例，每个实例都继承工厂函数的属性和方法，用软件工程的方法解决前端开发流程中模块化组件化等问题，目的是提高效率降低成本

36. 说一说封装vue组件的过程

1.封装HTML+CSS+VUE到独立的vue文件中，一个vue结尾的文件就是一个组件

2.引入注册组件文件，配置文件

3.使用当前页面做标签使用