vue高级面试（vue高频面试题 2020）

本篇文章给大家谈谈vue高级面试，以及vue高频面试题 2020对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、史上最全前端vue面试题！推荐收藏
• 2、有关vue的常见面试题（上）
• 3、2021-11-10.Vue前端面试题及答案
• 4、vue常见面试题
• 5、vue常见面试题（3）

史上最全前端vue面试题！推荐收藏

1.为什么会形成跨域？

不是一个源的文件操作另一个源的文件就会形成跨域。当请求端的协议、域名、端口号和服务器的协议、域名、端口号有一个不一致就会发生跨域。

解决方法：安装插件

Pip install django-cors-headers

2.vuex的工作流程？

① 在vue组件里面，通过dispatch来出发actions提交修改数据的操作。

② 然后再通过actions的commit来出发mutations来修改数据。

③ mutations接收到commit的请求，就会自动通过Mutate来修改state（数据中心里面的数据状态）里面的数据。

④ 最后由store触发每一个调用它的组件更新。

3.vuex是什么？怎么使用？

vuex是一个专为vue.js应用程序开发的状态管理模式。使用:store,getters,mutations,actions,modules详细使用写法请见：

4.vuex中的数据在页面刷新后数据消失怎么解决？

使用sessionStorage或localStorage存储数据;也可以引入vuex-persist插件

5.在vue中，如何阻止事件冒泡和默认行为？

在绑定事件时，在指令后边加上修饰符.stop来阻止冒泡，.prevent来阻止默认行为

6.深拷贝与浅拷贝？

假设B复制A，修改A的时候，看B是否变化：B变了是浅拷贝（修改堆内存中的同一个值），没变是深拷贝（修改堆内存中不同的值）。浅拷贝只是增加了一个指针指向已存在的内存地址，深拷贝是增加了一个指针并申请了一个新的内存，使这个增加的指针指向这个新的内存。深拷贝和浅拷贝最根本的区别在于是否真正获取一个对象的复制实体，而不是引用。

7.vue的生命周期？

beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyedactived deactived （keep-alive）组件是否激活调用

8. keep-alive: 组件缓存

router.js中:

meta: {keepAlive:true} // 需要被缓存

钩子执行顺序：created - mounted - actived

include表示需要缓存的页面；exclude表示不需要缓存的页面。如果两个同时设置，exclude优先级更 改，则组件不会被缓存。

应用场景： 用户在某个列表页面选择筛选条件过滤出一份数据列表，由列表页面进入数据详情页面，再返回 该列表页，我们希望列表页可以保留用户的筛选状态。

9.vue传值方式？

props $emit() $on() $parent $children $listener $attr

10. $on 兄弟组件传值

$emit 分发

$on 监听

$off 取消监听

$once 一次性监听一个事件

在js文件中定义一个中央事件总线Bus，并暴露出来

具体的实现方式：

使用Bus的时候在接收Bus的组件的beforeDestroy函数中销毁Bus，否则会一直叠加调用这个方法。

应用场景：“退出登录” - ①点击退出登录；②修改密码后自动退出登录

11.组件跨级传值

$attrs a-b-c

$listeners 监听

12.vue事件修饰符有哪些？

.stop .prevent .self .once .passive .sync

13.箭头函数中的this？

不具有this绑定，但函数体可以使用this，这个this指向的是箭头函数当前所处的词法环境中的this对象。

15.为什么vue组件中data必须是一个函数？

如果不是函数的话，每个组件的data都是内存的同一个地址，一个数据改变了其他也改变了，当他是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立，就不会互相影响。

16.v-if 和 v-show区别？

v-if 是对标签的创建与销毁， v-show 则仅在初始化时加载一次，v-if 开销相对来说比v-show 大；

v-if 是惰性的；v-show 做的仅是简单的css切换。

17.v-text 与 v-html区别？

v-text 用于普通文本，不能解析html；

v-html 反之。

18.v-for key的作用？

使用v-for更新渲染过的数据，它默认用“就地复用”策略。如果数据项的顺序改变，vue将不是移动DOM元素来匹配数据项的改变，而是简单地复用此处每个元素，并确保在特定索引下显示已被渲染过的每个元素。key属性类型只能是string或number。

key的特殊属性主要用在虚拟DOM算法，在新旧node对比时辨识VNods。如不使用key，vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法，它会基于key的变化重新排列元素顺序。

19.Scss是什么？在vue-cli中安装步骤？有哪几大特性？

npm 下载loader （sass-loader,css-loader,node-sass）,在webpack中配置extends属性（加.scss拓展） Vscode中可在扩展中下载;

特性：可以用变量，可以用混合器，可以嵌套等。

20.vue获取dom？

ref

21.vue初始化页面闪动问题？

webpack、vue-router

v-cloak css:[v-cloak]:display:none

22.什么是vue-router？

vue router 是官方路由管理器。

主要功能：路由嵌套，模块化 基于组件路由配置，路由参数、查询、通配符，细粒度导航控制，自定义的滚动条行为等。

23.vue路由传参，接收？

传： this.$router.push({path:'', query(params):{}})

接：this.$router.query.xxx

24.防抖和节流？

节流是一定时间内执行一次函数，多用在scroll事件上；

防抖是在一定时间内执行最后一次的函数，多用在input输入操作，表单提交等。

25.如何让scss只在当前组件中起作用？

有关vue的常见面试题（上）

防抖 ：一个频繁触发的函数，在规定时间内，只让最后一次生效，前面的不生效。

例：防抖经常用在我们搜索框输入搜索，点击提交，防止等；

节流 ：一个频繁触发的函数，在规定时间内，函数执行一次后，只有大于设定的执行周期后才会执行第二次。

例：节流一般在onresize、mousemove、滚动事件等事件中使用，防止过多的请求造成服务器压力

盒模型的组成：元素的内容content、元素的内边距padding、元素的外边距margin、元素的边框border

盒模型分为 ： W3C标准盒子 、IE盒子

W3C标准盒子（content-box） ：又称内容盒子，是指块元素box-sizing属性为content-box的盒模型，盒子总宽度 = margin + border + padding + width

IE盒子（border-box） ：又称怪异盒模型（边框盒子），是指块元素box-sizing属性为border-box的盒模型，盒子总宽 = margin + width

1.toString()与join()一样都是把数组转成以逗号分割的字符串

2.pop() 删除数组的最后一项

3.push() 往数组最后添加新数据

4.shift() 删除数组最前面的一项

var定义的变量可以修改，如果不初始化会输出undefined，不会报错。

const定义的变量不可以修改，而且必须初始化

let是块级作用域，函数内部使用let定义后，对函数外部无影响。

1.都支持服务器端渲染

2.都有虚拟dom,组件化开发,都有‘props’的概念,允许父组件往子组件传送数据,都实现webComponent规范

3.数据驱动视图

4.都有支持native的方案,React的React native,Vue的weex

5.构建工具

React和Vue都有自己的构建工具，你可以使用它快速搭建开发环境。React可以使用Create React App (CRA)，而Vue对应的则是vue-cli。都有管理状态，React有redux,Vue有自己的Vuex

设计思想

react

1.函数式思想，all in js ,jsx语法，js操控css

2.单项数据流

3.setState重新渲染

4.每当应用的状态被改变时，全部子组件都会重新渲染。当然，这可以通过shouldComponentUpdate这个生命周期方法来进行控制，如果为true继续渲染、false不渲染，但Vue将此视为默认的优化。

vue

1.响应式思想，也就是基于数据可变的。把html、js、css、组合到一起，也可以通过标签引擎组合到一个页面中

2.双向绑定，每一个属性都需要建立watch监听（页面不用，涉及到组件更新的话需要）

3.Vue宣称可以更快地计算出虚拟 DOM的差异，这是由于它在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树

性能

react ----大型项目、优化需要手动去做，状态可控

vue ------中小型项目、状态改变需要watch监听，数据量太大的话会卡顿

扩展性

react

1 类式写法api少，更容易结合ts

2 可以通过高阶组件来扩展

vue

1 声明式写法，结合ts比较复杂

2 需要通过mixin方式来扩展

vue-router提供了导航钩子:全局前置导航钩子 beforeEach和全局后置导航钩子 afterEach

导航钩子3个参数(to,from,next):

到达这个组件时：

离开这个组件时：beforeRouteLeave:(to,from,next)={}

确认离开next();取消离开next(false)；

beforeEnter:(to,from,next)={}，用法与全局守卫一致。只是，将其写进其中一个路由对象中，只在这个路由下起作用。

方法一：

子组件绑定一个事件，通过 this.$emit() 来触发

在子组件中绑定一个事件，并给这个事件定义一个函数

在父组件中定义并绑定 handleChange 事件

方法二：

通过 callback 函数

先在父组件中定义一个callback函数，并把 callback 函数传过去

在子组件中接收，并执行 callback 函数

方法三：

通过 $parent /$children 或 $refs 访问组件实例

这两种都是直接得到组件实例，使用后可以直接调用组件的方法或访问数据。

这种方式的组件通信不能跨级

方法四：

$attrs和$listeners

2021-11-10.Vue前端面试题及答案

const vm = new Vue({

...

methods: {

handlerEvent(event) {

console.log(event) // 鼠标点击时，获取到事件对象

}

}

})

1、如果只是事件函数的调用，函数名称后面不要添加括号

好处：函数执行时，第一个形式参数会被系统自动注入

一个事件对象，提供给函数使用

@click="handlerEvent"

2、如果事件函数调用执行时，需要传递参数，函数名称后面

必须添加括号，如果要使用事件对象，就必须手工注入(固定语法)

@click="handlerEvent($event)"

事件冒泡是JS语法中的一种事件触发机制，描述的是目标元素上的事件一旦发生，就会根据DOM节点结构，将事件逐步依次触发到父节点上的一种事件机制

原生JS中通过兼容性语法阻止事件冒泡

event.stopPropagation?event.stopPropagation():event.cancelBubble=true

Vue中对于事件冒泡的处理进行了封装，提供了事件修饰符完成阻止冒泡行为

固定语法：标签对象的事件属性上，添加 @事件对象.stop="处理函数"

.self事件修饰符的作用，就是让事件的触发方式只能由当前标签上发生的事件触发！

.lazy作为表单修饰符，经常用在表单元素上，用于将表单数据的同步机制延迟到表单元素失去焦点时再进行同步，节省资源、提高整体效率！

Vue数据双向绑定的特性，指代的是Vue实例中的数据和网页视图中的数据绑定，实例中数据的更新会直接影响视图的渲染展示，视图中的数据更新会自动同步到实例中的数据，这样的操作机制就是数据双向绑定机制；Vue底层主要是通过Object.defineProperty()数据劫持的操作方式完成的！

数据劫持本质上就是一种变量的高级声明方式，通过数据劫持的语法声明的变量，我们可以针对变量数据的查询、编辑进行监听，随时根据变量的使用情况进行功能的添加，如数据的双向绑定，完成数据的自动同步和自动渲染！

vue常见面试题

1.什么是vue的生命周期？

Vue实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载DOM-渲染、更新-渲染、卸载等一系列过程，我们称这是Vue的生命周期。

2.vue生命周期的作用是什么？

它的生命周期中有多个事件钩子，让我们在控制整个vue实例的过程时更容易形成好的逻辑。

3.Vue生命周期总共有几个阶段？

它可以总共分为8个阶段：创建前/后,载入前/后，更新前/后，销毁前/销毁后

4.第一次页面加载会触发那几个钩子？

第一次页面加载时会触发beforeCreate,created,beforeMount,mounted

5.DOM渲染在哪个周期中就已经完成？

DOM渲染在mounted中就已经完成了

6.生命周期钩子的一些使用方法：

1.beforecreate:可以在加个loading事件，在加载实例是触发

2.created:初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用

3.mounted:挂载元素，获取到dom节点

4.updated:如果对数据统一处理，在这里写上相应函数

5.beforeDestroy:可以一个确认停止事件的确认框

6.nextTick:更新数据后立即操作dom

7.v-show与v-if的区别

v-show是css切换，v-if是完整的销毁和重新创建

使用频繁切换时用v-show,运行时较少改变时用v-if

V-if=’false’v-if是条件渲染，当false的时候不会渲染

使用v-if的时候，如果值为false，那么页面将不会有这个html标签生成

v-show则是不管值是为true还是false，html元素都会存在，只是css中的display显示或隐藏

v-show 仅仅控制元素的显示方式，将 display 属性在 block 和 none 来回切换；而v-if会控制这个 DOM 节点的存在与否。当我们需要经常切换某个元素的显示/隐藏时，使用v-show会更加节省性能上的开销；当只需要一次显示或隐藏时，使用v-if更加合理。

8.开发中常用的指令有哪些?

v-model:一般用在表达输入，很轻松的实现表单控件和数据的双向绑定

v-html：更新元素的innerHTML

v-show与v-if：条件渲染，注意二者区别

v-on:click:可以简写为@click,@绑定一个事件。如果事件触发了，就可以指定事件的处理函数

v-for：基于源数据多次渲染元素或模板

v-bind:当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM语法

v-bind:title=”msg”简写：title="msg"

9.绑定class的数组用法

1.对象方法v-bind:class="{'orange':isRipe, 'green':isNotRipe}”

2.数组方法v-bind:class="[class1,class2]"

3.行内v-bind:style="{color:color,fontSize:fontSize+'px'}”

10.路由跳转方式

1.router-link标签会渲染为标签，咋填template中的跳转都是这种；

2.另一种是编辑是导航，也就是通过js跳转比如router.push('/home')

12. computed和watch有什么区别

computed

computed是计算属性，也就是计算值，它更多用于计算值的场景

computed具有缓存性，computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时重新调用对应的getter来计算

computed适用于计算比较消耗性能的计算场景

watch

watch更多的是[观察]的作用，类似于某些数据的监听回调，用于观察props $emit或者本组件的值，当数据变化时来执行回调进行后续操作

无缓存性，页面重新渲染时值不变化也会执行

小结

当我们要进行数值计算，而且依赖于其他数据，那么把这个数据设计为computed

如果你需要在某个数据变化时做一些事情，使用watch来观察这个数据变化。

13. vue组件的scoped属性的作用

在style标签上添加scoped属性，以表示它的样式作用于当下的模块，很好的实现了样式私有化的目的；

但是也得慎用：样式不易（可）修改，而很多时候，我们是需要对公共组件的样式做微调的；

解决办法：

①：使用混合型的css样式：（混合使用全局跟本地的样式） /* 全局样式 */ /* 本地样式 */

②：深度作用选择器（）如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 操作符： .a .b { /* ... */ }

14. vue是渐进式的框架的理解：( 主张最少,没有多做职责之外的事 )

Vue的核心的功能，是一个视图模板引擎，但这不是说Vue就不能成为一个框架。如下图所示，这里包含了Vue的所有部件，在声明式渲染（视图模板引擎）的基础上，我们可以通过添加组件系统、客户端路由、大规模状态管理来构建一个完整的框架。更重要的是，这些功能相互独立，你可以在核心功能的基础上任意选用其他的部件，不一定要全部整合在一起。可以看到，所说的“渐进式”，其实就是Vue的使用方式，同时也体现了Vue的设计的理念

在我看来，渐进式代表的含义是：主张最少。视图模板引擎

每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。

比如说，Angular，它两个版本都是强主张的，如果你用它，必须接受以下东西：

必须使用它的模块机制- 必须使用它的依赖注入- 必须使用它的特殊形式定义组件（这一点每个视图框架都有，难以避免）

所以Angular是带有比较强的排它性的，如果你的应用不是从头开始，而是要不断考虑是否跟其他东西集成，这些主张会带来一些困扰。

Vue可能有些方面是不如React，不如Angular，但它是渐进的，没有强主张，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；还可以用它的视图，搭配你自己设计的整个下层用。也可以函数式，都可以，它只是个轻量视图而已，只做了自己该做的事，没有做不该做的事，仅此而已。

渐进式的含义，我的理解是：没有多做职责之外的事。

15.vue.js的两个核心是什么(数据驱动、组件系统。)

数据驱动:Object.defineProperty和存储器属性: getter和setter（所以只兼容IE9及以上版本），可称为基于依赖收集的观测机制,核心是VM，即ViewModel，保证数据和视图的一致性。

16.vue常用修饰符

修饰符分为：一般修饰符，事件修身符，按键、系统

①一般修饰符：

.lazy：v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步

inputv-model.lazy="msg"

.number

inputv-model.number="age"type="number"

.trim

1.如果要自动过滤用户输入的首尾空白字符inputv-model.trim='trim'

② 事件修饰符

av-on:click.stop="doThis"/a!-- 阻止单击事件继续传播 --

formv-on:submit.prevent="onSubmit"/form !-- 提交事件不再重载页面 --

av-on:click.stop.prevent="doThat"/a !-- 修饰符可以串联 --

formv-on:submit.prevent/form !-- 只有修饰符 --

divv-on:click.capture="doThis".../div !-- 添加事件监听器时使用事件捕获模式 --  !-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 --

divv-on:click.self="doThat".../div !-- 只当在 event.target 是当前元素自身时触发处理函数 -- !-- 即事件不是从内部元素触发的 --

av-on:click.once="doThis"/a !-- 点击事件将只会触发一次 --

③按键修饰符

全部的按键别名:

.enter.tab.delete(捕获“删除”和“退格”键).esc.space.up.down.left.right.ctrl.alt.shift.meta

inputv-on:keyup.enter="submit"或者input@keyup.enter="submit"

④系统修饰键 （可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。）

.ctrl.alt.shift.meta

input@keyup.alt.67="clear"或者div@click.ctrl="doSomething"Dosomething/div!-- Ctrl + Click --

20.Vue 组件中 data 为什么必须是函数

vue组件中data值不能为对象，因为对象是引用类型，组件可能会被多个实例同时引用。

如果data值为对象，将导致多个实例共享一个对象，其中一个组件改变data属性值，其它实例也会受到影响。

vue常见面试题（3）

1. 什么是vue的计算属性computed

计算属性是需要复杂的逻辑，可以用方法method代替

2.vue-cli提供的几种脚手架模板

vue-cli 的脚手架项目模板有browserify 和 webpack；

3.组件中传递数据？

4. vue-router实现路由懒加载（ 动态加载路由 ）

5. vue-router 的导航钩子,主要用来作用是拦截导航,让他完成跳转或取消

6. 完整的 vue-router 导航解析流程

7. vue-router如何响应 路由参数 的变化？

原来的组件实例会被复用。这也意味着组件的生命周期钩子不会再被调用。你可以简单地 watch (监测变化) $route 对象：

8.vue-router的几种实例方法以及参数传递

name传递

to来传递

采用url传参

9. is的用法（用于动态组件且基于 DOM 内模板的限制来工作。）

is用来动态切换组件，DOM模板解析

tabletris="my-row"/tr /table

10.vuex是什么？怎么使用？哪种功能场景使用它？

是什么：vue框架中状态管理:有五种，分别是 State、 Getter、Mutation 、Action、 Module

使用：新建一个目录store，

场景：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车

vuex的State特性

A、Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于一般Vue对象里面的data

B、state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新

C、它通过mapState把全局的state和getters映射到当前组件的computed计算属性中

vuex的Getter特性

A、getters可以对State进行计算操作，它就是Store的计算属性

B、虽然在组件内也可以做计算属性，但是getters可以在多组件之间复用

C、如果一个状态只在一个组件内使用，是可以不用getters

vuex的Mutation特性

改变store中state状态的唯一方法就是提交mutation，就很类似事件。每个mutation都有一个字符串类型的事件类型和一个回调函数，我们需要改变state的值就要在回调函数中改变。我们要执行这个回调函数，那么我们需要执行一个相应的调用方法：store.commit。

Action类似于mutation，不同在于：Action提交的是mutation，而不是直接变更状态；Action可以包含任意异步操作，Action函数接受一个与store实例具有相同方法和属性的context对象，因此你可以调用context.commit提交一个mutation，或者通过context.state和context.getters来获取state和getters。Action通过store.dispatch方法触发：eg。store.dispatch('increment')

vuex的module特性Module其实只是解决了当state中很复杂臃肿的时候，module可以将store分割成模块，每个模块中拥有自己的state、mutation、action和getter

vue高级面试的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于vue高频面试题 2020、vue高级面试的信息别忘了在本站进行查找喔。