[JavaScript知识库]vue面试题

1.?Vue?的最大的优势是什么？

简化：Vue的最大的优势有以下几点;组件化开发，双向数据绑定，基于虚拟DOM，单页面应用，轻量级，生态丰富

2. Vue和jQuery两者之间的区别是什么

jQuery： 曾经是前端最流行的js库。

Vue： 是一个轻量级框架，是一个精简的MVVM。从技术角度讲。Vue.js专注于MVVM模型的ViewModel层，它通过双向数据绑定把view和Model层连接起来，通过对数据的操作完成对页面视图的渲染。

二者的区别是：

一、Vue 和 jQuery 对比 jquery是使用选择器（）选取DOM对象，对其进行赋值、取值、事件绑定等操作，和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。

二、Vue 则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的 DOM 对象，他们通过 Vue 对象这个 vm 实现相互的绑定。这就是传说中的 MVVM。

3.mvvm 和 mvc 区别是什么？哪些场景适合?

mvc和mvvm都是一种设计思想。主要就是mvc中Controller演变成mvvm中的viewModel。mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。

区别 :数据驱动，通过数据来显示视图层而不是节点操作。

4.Vue 数据双向绑定的原理是什么?（必会）

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式来实现的，具体来说主要有两 点：

1.通过object.defineproperty这个api在vue实例上添加属性,当我们修改数据时,就会触发相应的setter里面的回调函数,来实现页面的更新

2.使用观察者模式设计，实现了指令和数据的依赖关系，以及触发更新

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

5.object.defineproperty与proxy的区别?

共同点:都可以访问与修改一个对象上的属性

区别:1.Proxy 可以直接监听对象而非属性；2.Proxy 可以直接监听数组的变化；3.Proxy 有多达 13 种拦截方法

4.Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改； 这些都是Object.defineProperty不具备的；但是Object.defineProperty的兼容性较好,Proxy 的存在浏览器兼容性问题 Object.defineProperty的优势如下: 兼容性好,proxy有兼容性问题,也无法用ployfill磨平

6.Vue 生命周期总共分为几个阶段？(必会)

Vue 实例从创建到销毁的过程，就是生命周期

常用的有8种:

1 ） beforeCreate 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配 置之前被调用。

?2 ） created 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)， 属性和方法的运算，watch/event 事件回调。然而，挂 载阶段还没开始，$el 属性目前不可见。

3 ） beforeMount 在挂载开始之前被调用：相关的 render 函数首次被调用。 4 ） mounted el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。

5 ） beforeUpdate 数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问 现有的 DOM，比如手动移除已添加的事件监听器。该钩子在服务器端渲染期间不 被调用，因为只有初次渲染会在服务端进行。

6 ） updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

?7?） beforeDestroy 实例销毁之前调用。在这一步，实例仍然完全可用。该钩子在服务器端渲染 期间不被调用。

8?） destroyed Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有 的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间 不被调用。

不常用的有3种:

?9?） activated keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用。

10?） deactivated keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用。

11 ） errorCaptured （ 2.5.0+ 新增） 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

7.第一次加载页面会触发哪几个钩子函数？

- 1.创建前后：beforeCreate（）,created()

- 2.挂载前后：beforeMount（）,mounted()

8.请说下封装Vue组件的过程

第一步:使用 Vue.component 方法注册组件，子组件需要数据，可以在 props 中接受定义，而子组件修改好数据后，想把数据传递给父组件。可以采用$emit 方法向外抛数据

第二步:如果需要给组件传入模板，则定义为插槽 slot

第三步:如果需要 父组件主动调用子组件的方法 可以在 methods 选项中通过ref调用子组件的方法

9.?Vue 组件如何进行传值的?

第一种是父传子：父组件中通过自定义属性向子组件传值、子组件通过props来接受父组件传的值

第二种是子传父：父组件通过在子组件的标签上绑定自定义事件 子组件通过$emit来触发自定义事件

第三种是非父子组件传值：通过使用eventBus来监听on事件 另一个组件使用eventBus.emit来触发事件

第四种就是使用vuex来对数据进行集中式管理 达到数据共享 整个项目都可以进行访问

10.组件中写 name 选项有什么作用？

1、项目使用 keep-alive 时，可搭配组件 name 进行缓存过滤

2、DOM 做递归组件时需要调用自身 name

3、Vue-devtools 调试工具里显示的组见名称是由 Vue 中组件 name 决定的

11.Vue 组件 data 为什么必须是函数?

在文档中明确指出data必须是函数，若不是函数就会报错！

同一个组件被多次复用会创建多个实例，如果data是一个对象的话，这些实例会共享同一个data，改变一个就会影响其他。

为了保证组件的数据独立，将组件中的data写成一个函数，并且数据以函数返回值的形式定义，这样每次组件复用，都会返回一份新的data

12.Vue组件命名规范

一、是使用链式命名my-component

二、是使用大驼峰命名MyComponent使用的两种方式

在 字 符 串 模 板 中<my-component></my-component>和<MyComponent></MyComponent>都可以使用，

在非字符串模板中最好使用<MyComponent></MyComponent>，因为要遵循 W3C 规范中的自定义组件名 (字母全小写且必须包含一个连字符)，避免和当前以及未来的 HTML 元素相冲突

13.怎么在组件中监听路由参数的变化？（必会）

第一种使用$route (to, from)

第二种使用beforeRouteUpdate (to, from, next)

14.怎么捕获 Vue 组件的错误信息？

一、使用errorCaptured

当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回false以阻止该错误继续向上传播。

二、使用errorHandler 为全局钩子

使用 Vue.config.errorHandler 配置，接收参数与 errorCaptured 一 致，2.6 后可捕捉 v-on 与 promise 链的错误，可用于统一错误处理与错误兜底

15.Vue组件里的定时器要怎么销毁？

一 ，页面中有多个定时器

可以在data 里定义一个对象 对象里给每个定时器取个名字一 一映射 在beforeDestroy （实例销毁之前）里for in循环定时器的对象 使用clearInterval 清除全部定时器

二 ，只有单个定时器

给定时器一个名字 直接使用clearInterval（定时器名）

16.Vue.cli 中怎样使用自定义的组件？有遇到过哪些问题吗?（必会)

一，在 components 目录新建你的组件文件

二，在需要用到的页面import中导入

三，使用component注册

四，在 template 视图中使用组件标签

17.Vue 中 slot的使用方式，以及 slot作用域插槽的用法 （必会）

使用方式：组件当做标签进行使用的时候，slot可以用来接收组件标签包裹的内容，给slot标签添加name属性的时候就是一个具名插槽。父组件根据name给指定插槽传参

作用域插槽：作用域插槽就是带数据的插槽，父组件通过scope来进行接收子组件传过来的参数

18.Vue 该如何实现组件缓存?（必会）

vue要想实现组件缓存，需要用到vue中的一个内置组件<keep-alive>因为 <keep-alive>?包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们

所以它主要用于保留组件状态或避免重新渲染

19.跟keep-alive有关的钩子函数

有俩个 第一个 activated 钩子：在组件第一次渲染时在 mounted后面会被调用，之后在每次缓存组件被激活时调用 第二个 deactivated 钩子：组件被停用（离开路由）时调用

20.Vue 常用的修饰符都有哪些？

修饰符主要分为表单修饰符和事件修饰符,表单修饰符主要指的是v-model修饰符,事件修饰符是v-on修饰符

v-model修饰符

v-model.number 以parseFloat转成数字类型

v-model.trim 去除首尾空白字符

v-model.lazy 在change时触发而非inupt时

v-on修饰符

@click.stop - 阻止事件冒泡

@click.prevent - 阻止默认行为

@click.once - 程序运行期间, 只触发一次事件处理函数

.@click.native 在组件内使用,如果组件没有事件,则native可以添加一个原生事件

@keyup.enter - 监测回车按键

@keyup.esc - 监测返回按键

21.Vue 常用的指令都有哪些？并且说明其作用

Vue的常用指令共有15个:

1、v-model

多用于表单元素实现双向数据绑定

2、v-for

多用于循环创建DOM元素

3、v-show

显示内容 (通过修改标签上的display属性,来进行显示和隐藏)

4、v-hide

隐藏内容

5、v-if

显示与隐藏 （创建和删除DOM元素 默认值为 false）

6、v-else-if

必须和 v-if 连用

7、v-else

必须和 v-if 连用 不能单独使用 否则报错 模板编译错误

8、v-bind

动态绑定 作用： 及时对页面的数据进行更改

9、v-on:click

给标签绑定函数，可以缩写为@，例如绑定一个点击函数 函数必须写在 methods里面

10、v-text

解析文本

11、v-html

解析 html 标签

12、v-bind:class

三种绑定方法

1、对象型 '{red:isred}'

2、三元型 'isred?"red":"blue"'

3、数组型 '[{red:"isred"},{blue:"isblue"}]'

13、v-once

进入页面时 只渲染一次 不在进行渲染

14、v-cloak

防止闪烁

15、v-pre

把标签内部的元素原位输出

22.自定义指令(v-check、v-focus)的方法有哪些?它有哪些钩子函数？还有哪些钩子函数参数？

1、全局定义指令：

在 Vue 对象的 directive 方法里面有两个参数，一个是指令名称，另外一个是函数。

组件内定义指令：directives

2、钩子函数：

1、bind (绑定事件触发)

2、inserted (节点插入的时候触发)

3、update (组件内相关更新)

3、钩子函数参数：

el、binding

24.v-show 和?v-if?指令的共同点和不同点?（必会)

相同点：

v-show和v-if都能控制元素的显示和隐藏。

不同点：

实现本质方法不同

v-show本质就是通过设置css中的diplay设置为none，控制隐藏

v-if是动态的向DOM树内添加或者删除DOM元素

v-if有还可以搭配v-else if 和v-else使用

性能方面：

v-if首次加载消耗比较低，但是频繁切换时v-if就会频繁的删除DOM和添加DOM元素,所以消耗就比较高了

v-show首次加载消耗高点，但是频繁切换时消耗就要比v-if低多了

适用场景 如果要频繁切换某节点时，使用 v-show，如果不需要频繁切换某节点时，使用 v-if

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

原因：

因为v-for的优先级比v-if 的优先级高，所以每次渲染时都会先循环再进行条件判断，而又因为v-if 会根据渲染条件为true 或false来决定渲染与否的，所以如果将v-if 和v-for用在一起会特别消耗性能

解决方案：

一、将v-if 放在外层嵌套template（页面渲染不生成dom节点），在这一层进行v-if判断，然后在内部进行v-for 循环

二、如果条件出现在循环内部，不得不放在一起，可通过计算属性computed提前过滤掉那些不需要显示的项在v-if和v-for用在同一个元素上时，因为v-for要比v-if的优先级高，所以会先执行循环，再进行判断，这样无论条件判断的结果如何，循环都会执行。所以要避免她们用在一起，如果需要的话，可以在外层加一个template，v-if用在template上，这样就可以实现先判断再根据判断结果决定是否执行循环了。

26.watch、methods、computed区别

首先他们三者的基本区别是 computed 是计算属性的对象 methods 是方法集合的对象 watch 是监听数据变动的对象

然后加载顺序也不同 分如下3种 :

第一种什么时候加载

\1. computed 是在 HTML DOM 加载后马上执行的，如赋值；

2.methods 则必须要有一定的触发条件才能执行，如点击事件

\3. watch 是用于观察 Vue 实例上的数据变动。

第二种是默认加载时候的顺序

先 computed 再 watch，不执行 methods；

第三种 当触发某一事件后的执行顺序

先 computed 再 methods 再到 watch

27.怎么在 watch 监听开始之后立即被调用？

Watch来监听双向绑定中data的变化过程. 1:watch在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调。

28.watch 怎么深度监听对象变化？

watch深度监听对象，只需要用deep: true深度监听，此时对象中的某个值发生改变就会触发监听

29.computed中的属性名和** data?**中的属性名可以相同吗？

不能同名，因为不管是 computed 属性名还是 data 属性名以及 props 属性名都会被挂载在 vm 实例上，因此这三个都不能同名。

30.什么是vue的计算属性（必会）

简单来说计算属性就是 一个数据依赖另外一些数据计算而来的结果

计算属性:就是当其依赖属性的值发生变化时，这个属性的值会自动更新，与之相关的DOM部分也会同步自动更新。

计算属性的好处是:它把新的数据缓存下来了，当其他的0依赖数据没有发生改变，它调用的是缓存的数据，极大的提高了我们程序的性能

31.Vue 中 key 值的作用是什么？

1.key 的作用主要是为了高效的更新虚拟 DOM。

\2. 当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。而Key会帮我们记住元素们的顺序，并根据这个顺序在适当的位置插入/删除元素来完成更新，这种方法比没有key属性时的就地复用策略,效率更高

32.vue-loader是什么？使用它的用途有哪些?

vue-loader是一个webpack的loader，它允许一种名为单文件组件的格式撰写组件

它能解析和转换 .vue文件，提取其中的逻辑代码script、样式文件style、html模板template，并分别交给各自对应的loader处理

33.Vue中怎么定义过滤器?

有两种定义方式,分别是全局与局部

1.全局注册:

Vue.filter(‘名字’,’回调’)

2.局部注册:

跟data、methods同级

filter{

名字:(){}

}

过滤器经常被用于格式化一些文本,在模板中用管道符”|”使用

但是在vue3中,过滤器已经被移除了.因为过滤器能实现的功能,写个普通函数都可以实现

34.?你是怎么认识 Vuex 的?（必会）

vuex是一个专为vue设计的集中式的状态管理工具，它可用于父子组件和非父子组件的全局组件通信，

所应用的状态集中放在store中，在组件中通过this.$store.dispatch来调用actions中的方法，在action中通过commit来调用mutations中的方法，在mutations的方法中操作state中的数据，数据只要更新就会立即响应到组件上

35.Vuex 的 5 个核心属性是什么?

vuex五大核心属性分别是：state，mutation，getter，action，module。

state：存放数据，存储状态；在根组件实例中注册了store 后，用 this.$store.state 来访问

mutation：更改 Vuex 的 store 中状态的唯一方法是提交 mutation。

action：包含任意异步操作，通过提交 mutation 间接更改状态。

getter：可以对state 进行计算操作，它的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

module：面对复杂的应用程序，当管理的状态比较多时；我们需要将vuex的store对象分割成模块(modules),进行模块化管理

36.Vuex的出现解决了什么问题?

主要解决了以下二个问题:

（1）多个视图依赖于同一状态。

（2）来自不同视图的行为需要变更同一状态。

（注：需掌握state，Mutationss，actions，getters）

37.vuex修改数据的过程

当我们需要修改vuex数据的时候,总共分为4步

\1. 先调用dispatch方法来触发actions里面的方法

\2. Actions里面每个方法都会有一个commit方法,当方法执行时,通过commit来触发Mutations里面的方法进行数据的修改

\3. Mutations里面的每个函数都会有一个state参数,这个就可以直接在Mutations里面进行state的数据修改

\4. 当数据修改完毕,会传导给页面,页面的数据发生改变,触发视图的更新

38.Vuex 的 Mutations?和 Actions **之间的区别是什么？（必 会）

定位不同：mutations专注修改state，理论上就是修改state的唯一途径。Actions专注于业务代码，和异步操作。

限制角色不同： Mutation：必须同步执行。Actions：可异步可同步，但是不能直接修改state。

39.Vue-Router 是干什么的，原理是什么？（必会）

作用: 1.Vue-Router 是 Vue.js 官方的路由插件，它和 Vue.js 是深度集成的，用于构建单页面应用。 原理: 1.Vue 的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来. 2.传统的页面应用，是用一些超链接来实现页面切换和跳转的。在 Vue-Router 单页面应用中，则是路径之间的切换，也就是组件的切换。 3.路由模块的本质 就是建立起 url 和页面之间的映射关系。 “更新视图但不重新请求页面”是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有两种方式： 1.利用 URL 中的 hash（“#”） 2.利用 History interface 在 HTML5 中新增的方法

41.Vue-Router 怎么配置路由（必会）

在 Vue 中配置路由共分为 5 个步骤，分别是：

第一步.如果项目中没有下载路由包需要先下载并进行引入

第二步.定义路由规则并挂载到路由实例

第三步 配置路由出口

第四步 使用router-link进行路由跳转

42.Vue-Router 有哪几种路由守卫?

路由共有以下四种

第一种前置守卫：beforeEach

可以对目标 to 路由做个用户已授权的判断，如果用户达到条件则 next，否则你可以抛出个异常或者其他有用的信息。以免对后续组件的取值造成影响。

第二种后置守卫：afterEach

我们可以统一在此处做些状态信息的处理

第三种全局解析守卫：beforeResolve

第四种路由独享守卫：beforeEnters

如果只想让某个特定路由执行特殊“任务”，可以在路由定义上使用?beforeEnter，它和?beforeEach?一样具备守卫功能，即可以调用 next：

43.Vue-Router的钩子函数都有哪些?

关于 Vue-Router 中的钩子函数主要分为 3 类

（1）全局钩子函数要包含

前置守卫：beforeEach ，当一个导航触发时，全局前置守卫按照创建顺序调用。

解析守卫：beforeResolve，在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。

后置守卫：afterEach

（2）单独路由独享组件

独享守卫：beforeEnter，

（3）组件内钩子

beforeRouteEnter，在进入当前组件之前被调用，无法获取组件实例

beforeRouteUpdate,，在当前路由改变，但是该组件被复用时调用

beforeRouteLeave，导航离开该组件的对应路由时调用

44、路由传值的方式有哪几种（必会）

vue-router传递参数总的来说分为两大类

1/编程式的导航 router.push

2/声明式的导航 <router-link>

编程式导航传递参数有两种类型：字符串、对象。

字符串的方式是不能够传值 只能够跳转的

传递对象分为两种方式：

第一种是命名路由：如果路由中已经配置好了name属性就需要使用params

45.怎么定义 Vue-Router?的动态路由?怎么获取传过来的动 态参数?

可以通过query，prams两种方式定义，query通过$router.push里面的query属性进行传参，通过$route.query.参数名 接收，prams通过$router.push里面的prams进行传参，通过$route.params.参数名 接收（注意确认router和route）

46.query 和?params?之间的区别是什么？

1、query 要用 path 来引入，params 要用 name 来引入

2 、 接 收 参 数 时 ， 分 别 是 this.$route.query.name 和this.$route.params.name（注意：是$route 而不是$router）

47.$route与$router的区别

区别是: $route是获取路由信息的一个对象, $router 的作用是进行路由跳转的

具体点说就是

1.$route是“路由信息对象”，包括path，params，hash，query，fullPath，

matched，name等路由信息参数.当路由携带参数跳转时,通this.$route.xxx获取你想要的信息.

2.$router为VueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象，例如history对象，常用的跳转就是用 this.$router.push,该方法会往history栈中添加一个新的记录。返回上一个history也可使用$router.go(-1)方法 或 $router.back()

48.active-class 属于哪个组件中的属性？该如何使用？

active-class是 vue-router模块中 router-link 组件中的属性，主要作用是用来实现选中样式的切换。

在 Vue-中要使用 active-class 有两种 方式：分别是

\1. 在 router-link 中写入 active-class , active-class 选择样式时根据路由中的路径（to=“/home”）去匹配，然后显示

\2. 直接在路由 js 文件中配置 linkActiveClass ,具体做法是在路由文件中配置linkActiveClass: 'active'.

49.Vue 的路由实现模式：hash 模式和 history 模式

hash 模式：只有 hash/# 符号之前的内容会被包含在请求中 hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash后刷新, 也不会有问题

history模式： 美化后的hash模式，路径中不包含“#”。依赖于Html5 的 history api 由于改变了地址, 刷新时会按照修改后的地址请求后端, 需要后端配置处理, 将地址访问做映射, 否则会404

他们都是前端路由的两种模式 在开发环境下他们除了URL地址里的#外，使用起来并无区别 但是上线后history刷新页面会报404 需要后端配置

50.请说出路由配置项常用的属性及作用。

路由常用的配置项总共有七个，分别是：

（1）path:路由请求的路径

（2）component:路径匹配成功后需要渲染的组件或者页面

（3）redirect:重定向路由请求的路径

（4）children:路由嵌套，嵌套中的path不要加‘/’,因为以‘/’开头的嵌套路径会被当作根路径

（5）name:命名路由,给当前路由取一个别名

（6）props:路由解耦，路由传参的一种方式，针对动态路由

（7）meta:路由元信息，当前路由所携带的一些信息

51.编程式导航使用的方法以及常用的方法（必会）

编程式导航使用方法分为4种

1.路由跳转 ： this.$router.push()

2.路由替换 : this.$router.replace()

3.前进 ：this.$router.forward()在实际工作中,this.$router.push这种方式是使用的最多的

4.后退： this.$router.back()

52.Vue 中动画如何实现

vue提供了transition的封装组件，哪个元素要做动画就用transition标签包裹它。

vue的动画效果的原理是css中的transition属性

53.Vue 怎么实现跨域（必会）

1.实现跨域首先要知道什么是跨域，跨域是指浏览器不允许当前页面的所在源去请求另一个源的数据，源指协议，端口，域名，只要这三个中有一个不同就是跨域

2.前端解决跨域的办法有三种；分别是JSONP(jie seng p)，CORS(ku er si)，代理（Proxy），其中代理（Proxy）是相对最常用的，Vue脚手架搭建项目是配置代理的，只需要在Vue.config(ken fei g)里面配置一下就可以使用了

54.你对 Vue.js 的 template(0) 编译的理解？

\1. 首先第一步实例化一个vue项目

\2. 模板编译是在vue生命周期的mount(mao t)阶段进行的

\3. 通过compile(ken pai ou)编译器把template编译成AST语法树, AST在内部经过一些转化得到render(ruan de)函数，render的返回值是Vnode, VNode是Vue的虚拟DOM节点,

55.?Vue 渲染模板时怎么保留模板中的 HTML注释呢？

在组件中设置 comments (ko men s )属性, 当设置为 true 时, 将会保留且渲染模板中的 HTML 注释。官网默认为舍弃注释。

56.Vue2.0 兼容 IE 哪个版本以上吗？

因为 Vue 的响应式原理是基于 Object.defineProperty()(pa pe ti)来劫持对象属性的setter和getter来实现的,而这个方法不支持 ie8 及以下，部分兼容 ie9 ，完全兼容 10 以上

57.Vue 如何去除?URL中的#

路由是由多个URL组成的，使用不同的URL可以导航到不同的位置。

在Vue项目中Vue-Router 默认使用 hash 模式，所以在路由加载的时候，项目中的 URL 会自带 “#”。

如果想去除URL中的 “#”， 可以使用 Vue-Router 的history(hi si te rui )模式 ：

在项目中路由配置的地方加上mode : 'history'即可。

58.说一下你在Vue中踩过的坑（必会）

1、给对象添加属性的时候，直接通过给 data 里面的对象添加属性然后赋值，新添加的属性不是响应式的

【解决办法】通过: Vue.set(对象，属性，值)这种方式就可以达到，对象新添加的属性是响应式的

2、在 created 操作 dom 的时候，是报错的，获取不到 dom，这个时候实例 Vue实例没有挂载

【解决办法】通过：Vue.nextTick(回调函数进行获取)

59.在 Vue?中使用插件的步骤（必会）

使用插件一共有四步分别是：

1.先下载插件

2.导入插件

3.注册插件

4.使用插件

60.Vue 项目优化的解决方案都有哪些？

常用的方案有以下8种：

1、 使用 mini-css-extract(e s zhuai k te)-plugin (pu lou gan)插件抽离 css

2、 配置 optimization (o pe mi zei shen)把公共的 js 代码抽离出来

3、 通过 webpack 处理文件压缩

4、 不打包框架、库文件，通过 CDN 的方式引入

5、 小图片使用 base64

6、 配置项目文件懒加载

7、 UI 库配置按需加载

8、 开启 Gzip 压缩

61.style()加上scoped()的原理

主要原因是页面在打包后如果不进行相关配置会导致资源文件特别的大，一次想要全部加载完成会特别的耗时。

Vue-Router 解决首次加载缓慢的问题。懒加载简单来说就是按需加载。

通常vue的页面在运行后进入都会有一个默认的页面，而其他页面只有在点击后才需要加载出来。使用懒加载可以将页面中的资源划分为多份，从而减少第一次加载的时候耗时。

62.请说出 Vue-cli 项目中 src 目录每个文件夹和文件的用法？

项目src文件夹下相关文件作用如下:

\1. app.Vue 应用的根组件

\2. main.js 入口文件

\3. router文件夹: 定义路由相关的配置

\4. view(v u)文件夹: 存放自己编写的组件

\5. assets(a sa s)文件夹: 存放静态资源

\6. components(ken pou ne)文件夹: 存放公共文件

\7. store(s do er)文件夹: 存放vuex相关配置

63.你知道 style 上加 scoped 属性的原理吗？

1.scoped的作用:

scoped是为了在vue文件中使样式模块化,防止样式污染,添加上scoped属性表示只在当前的模块中生效

2.scoped 的实现原理：

Vue 中的 scoped 属性的效果主要通过 PostCSS 转译实现, PostCSS 给当前组件下的所有 dom 添加了一个唯一不重复的动态属性[ data-v-xxxx],而其他组件就不会添加[data-v-x

如果引用了第三方组件，需要在当前组件中局部修改第三方组件的样 式，而又不想去除 scoped 属性造成组件之间的样式污染。此时只能通过穿透选择器 ::v-deep 的方式来解决.

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

SPA 单页面是一种特殊的Web应用,它将所有的活动局限于一个 Web 页面中,一旦页面加载完成,不会因为用户的操作和进行页面的重新加载或跳转,是利用JavaScript 动态的变换 HTML 的内容，从而实现 UI 与用户的交互,可以提供较为流畅的用户体验

主要得益于ajax和浏览器的 histroy 机制,实现无跳转刷新,

优点是

1.无刷新界面，给用户体验原生的应用感觉

2.节省原生（android 和 ios）app 开发成本

3.提高发布效率，无需每次安装更新包。

缺点是:

1、各个浏览器的版本兼容性不一样

2、业务随着代码量增加而增加，不利于首屏优化

3、某些平台对 hash (ha shi)有偏见，有些甚至不支持 pushstate

4、不利于搜索引擎抓取

但总体来说还是利大于弊

65、怎样理解Vue的单向数据流（必会）

单向数据流的意思是指数据的改变只能从一个方向修改

举个栗子：

如一个父组件有两个子组件，分别为1和2。父组件向子组件传递数据，两个组件都接收到了父组件传递过来的数据，在组件1中修改父组件传递过来的数据，子组件2和父组件的值不会发生变化。但是如果父组件改变相应的数据，两个子组件的数据会发生相应的改变。 如果子组件想修改数据,只能通过 $emit 派发一个自定义事件，父组件接收到后，由父组件修改。

66、VNode 是什么？什么是虚拟 DOM？

Vnode是js一个对象，是从VNode类实例化的对象

虚拟DOM是一个js模拟了一个DOM结构的树状结构

67.vue面试题—Vue 中如何实现一个虚拟 DOM？说说你的思路（高薪常问）

所谓虚拟DOM，是一个用于表示真实 DOM 结构和属性的 JavaScript?对象，这个对象用于对比虚拟 DOM 和当前真实 DOM 的差异化，然后进行局部渲染从而实现性能上的优化。在Vue.js?中虚拟 DOM 的 JavaScript?对象就是 VNode。

换一种说法

\1. 虚拟dom就是通过一个对象描述一个html结构

\2. 在js对象和真实dom树之间存在的一个虚拟对象

\3. 所有的dom树节点都是根据这个虚拟dom实现生成的

\4. 在虚拟dom向真实的dom树转换之前会根据diff算法动态的计算需要更改的标签进行替换操作

68.vue中哪些数组方法会引起视图更新? 哪些不会?有什么解决办法?

可以触发视图更新有以下几种方法:

不会改变**原数组有以下7条**

push()、(尾部添加)

pop(po)()、(尾部删除)

shift()、(头部删除)

unshift()、(头部添加)

splice(s pei s)()、(截取)

sort(suo er)()、(排序)

reverse(rui we s)()(翻转)

会改变**原数组有以下3条**

filter(fiu t)()(筛选)

concat(kong kai )()(合并)

slice(s lei s)()

不可以触发视图更新有以下2种方法

直接用索引设置元素，如 this.array[index] = newValue

直接修改数组的长度，例： this.array.length = newLength

解决不可以触发试图更新的方法有如下2种

1.this.$set(this.array,index,newValue或者 this.array.splice(index,1,newValue)

\2. this.array.splice(newLength)

69.Vue 中怎么重置 data?

要初始化 data 中的数据，可以使用 Object.assign(e sai e)()方法，实现重置 data

中的数据。

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对

象复制到目标对象。它将返回目标对象。

它的用法是: Object.assign(target, ...sources)，第一个参数是目标对象，第二

个参数是源对象，就是将源对象属性复制到目标对象，返回目标对象

70.如何对 Vue 首屏加载实现优化?

对Vue首屏的加载优化有如下几点：

1、把不常改变的库放到 index.html 中，通过 cdn 引入

2、Vue 路由的懒加载

3、不生成 map 文件

4、Vue 组件尽量不要全局引入

5、使用更轻量级的工具库

6、开启 gzip 压缩

7、首页单独做服务端渲染

71.Vue的nextTick的原理是什么?

根据官方文档的解释他可以在dom更新完成后执行一次回调

nextTick方法的实现原理 ：

1.nextTick方法中会开启一个异步队列，并缓存此次事件循环中所有的数据变化，当一个watcher（订阅者）被多次触发时，只会被推入该异步队列中一次。

2.同步任务执行完毕后，执行该异步队列中watcher的更新函数。判断使用Promise，MutationObserver，setTimeout的优先级。系统中会优先用Promise

3.如果浏览器支持Promise，那么就用Promise.then的方式来延迟函数调用，Promise.then方法可以将函数延迟到当前函数调用栈最末端，也就是函数调用栈最后调用该函数。从而做到延迟。

72.在Vue实例中编写生命周期hook或其他option/propertie时,为什么不使用箭头函数（高薪常问）

**因为箭头函数自己没有定义 this 上下文，而是绑定到其父函数的上下文中。当你在 Vue 程序中使用箭头函数（=>）时，this 关键字不会绑定到 Vue 实例，因此会引发错误。所以强烈建议改用标准函数声明。

73.这个特性你有用过吗？主要用在哪些方面?

vue中is的属性引入是为了解决dom结构中对放入html的元素有限制的问题

<ul>

<li is='my-component'></li>

</ul>

74.vue面试题—scss 是什么？在 Vue.cli 中的安装使用步骤是？有哪几大特性？（高薪常问）

scss是一种css预处理语言，是一个css的扩展

它在vue.cli中的安装使用步骤分为一下4步：

1.先装 css-loader、node-loader、sass-loader 等加载器模块

2.在 build 目录找到 webpack.base.config.js，在那个 extends 属性中

加一个拓展.scss

3.在同一个文件，配置一个 module 属性

4.然后在组件的 style 标签加上 lang 属性 ，例如：lang=”scss”

有三大特性：

1.可以用变量

2.可以用混合器

3.可以嵌套

75 介绍一下package().json()这个文件的作用

可以理解为项目的说明书,这个文件记录了当前项目信息

1、 Name:项目名称

2、 Version: 项目版本

3、 Description: 项目描述

4、 Author：作者

5、 Prinate：项目是否私有

6、 Scripts:npm run *** 命令用于调用 node 执行的.js 文件