前端Vue常见面试题大全

前端Vue常见面试题大全

目录

1.Vue和React有什么不同固仞肠景分别是什么？

2.axios是什么？怎么使用它，怎么解决跨域？

3.说说Vue,React,angularjs,jque「y的区别

4•什么阶段（生命周期）才能访问操作dom?为什么

5.组件中的data为什么是个函数？

6.说一说scoped样式隔离

7.v书与v-show的区别?

8•什么是MVVM?

9.Vue修饰符有哪些？

10.函数式组件使用场景和原理

11.能说下vue-router中常用的路由模式实现原理吗?

12.GET和POST的区别

13.cookie和seesion区别

14.跨域的方法

15.Vue组件通信有哪些方式

16.Vue的优点是什么？

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

18.你的接口请求一般放在哪个生命周期中？

19.说一下指令v-el的作用是什么？

20.说几种如何实现vue首屏加载优化的

21.请说出vue.cli项目中src目录每个文件夹和文件的用法?

22.$route和$router的区别

23.对于vue3Q特性你有什么了解吗？

24.虚拟DOM的优缺点

25.虚拟DOM实现原理

26.直接给一个数组项赋值，Vue能检测到变化吗?

27.简述原型与原型链，原型链的作用有哪些？

28.普通函数，箭头函数的区别

29.怎样理解Vue的单向数据流？

30.vue-router是什么？有哪些组件？

31.Vuex解决了什么问题？

32.什么时候用Vuex

33.Vuex中状态存储在那里？怎么改变它

34%呢和依羽》的区别在哪？为什么放弃JQuery用Vue?

35.slot插槽

36.v・if和vdor为什么不建议一起使用?

37.vue初始化页面闪动问题什么原因怎么解决？

38.Vue的两个核心点

39.什么是闭包，用途有哪些？

40.组件间的通讯

41.Promise的作用

42.map与set的区别

43.构造函数与普通函数的区别

44.hash与history的区别

45.vue常用指令？

46.Vue父子组件的生命周期顺序

47.vue-router路由的两种模式

48.vue中keep-alive组件的作用

49.v-show和vIf指令的共同点和不同点

50.Vue.extend作用和原理

51.异步同步

52.Vue.set方法原理

53.不用Vuex会带来什么问题？

54.对SSR有了解吗，它主要解决什么问题?

55.SSR优缺点？

56.Vuex为什么要分模块

57.Vuex页面刷新数据丢失怎么解决?

58.nextTick使用场景和原理

59.页而渲染为什么使用key?

60.VNode是什么？虚拟DOM是什么?

61.setup组合api的优点

62.辅助函数的实现

63.Vuex响应式

64.Vue项目性能优化

65.vue-router路由模式有几种？

66.vue生命周期钩子函数有哪些?

67.Vue.js有什么特点？

68.axios是什么？如何使用它？

69.如何在Vue.js中循环插入图片？

70.如何解决数据层级结构太深的问题

71.如何让CSS只在当前组件中起作用？

72.vue-router是什么？它有哪些组件

73.在哪个生命周期内调用异步请求？为什么？优点？

74.computed和watch的区别和运用的场景？

75.Vue的父组件和子组件生命周期钩子函数执行顺序?

76.v-model的原理?

77.vuex有哪几种属性

78.vuex的getter特性是什么

79.vue2.x中如何监测数组变化

80.可以被vue拦截到的数组方法以及不能被拦截到的数组方

法？

81.谈谈单页面(SPA)的理解？

82.谈谈你对Vue生命周期的理解？

83.Class与Style如何动态绑定？

84.vue-router路由钩子函数是什么？

85.Vue3.0和2.0的响应式原理区别

86.axios和ajax的区别：

87.vue中解决跨域问题

88.vue的原理

89.watch>methods和computed的区别?

90.webpack有哪些优点？

91.Vue生命周期钩子是如何实现的

92.Vue的双向数据绑定原理是什么？

93.在webpack中，为什么要打包发布？

94.路由守卫

95.SPA首屏加载速度慢的怎么解决？

96.Vue初始化过程中(newVue(options))都做了什么？

97.对MVVM的理解？

98.Vue数据双向绑定原理

99.Vue的响应式原理

100.Vue3.x响应式数据原理

101.Vue3.O里为什么要用ProxyAPI替代definePropertyAP

102.Proxy与Object.defineProperty优劣对比

1O3.vue中组件的data为什么是一个函数？而newVue实例

里，data可以直接是一个对象

104.vue中data的属性可以和methods中方法同名吗，为什么？

105.vue中created与mounted区别

106.Vue中computed与method的区别

107.虚拟DOM中key的作用

108,用index作为key可能会引发的问题

109.Vue中watch用法详解

110.vue中对mixins的理解和使用

111.为什么vue采用异步渲染

112.Vue的异步更新机制是如何实现的？

113.$nextTick的理解

114.vue的自定义指令

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

116.vue为什么在HTML中监听事件？

117.Vue.set改变数组和对象中的属性

118.vm.$set(obj,key,val)做了什么？

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

120.vue・router有儿种钩子函数？

121.vue・router路由跳转方式

122.Vuex是什么？怎么使用？

123.Vuex和单纯的全局对象有什么区别？

124.为什么Vuex的mutation中不能做异步操作？

125.Vue项目前端开发环境请求服务器接口跨域问题

126,做过哪些Vue的性能优化？

127.Vue中的插槽

128.v-for为什么要加上key

129.Vdom的理解（虚拟DOM）

13O.vue的缺点

131.vue和react区别

132.slot插槽种类以及原理

133.template模板引擎的渲染过程

134.Vue.use是做什么的,原理是什么

135.组件中写name选项有哪些好处

136.data里面数据量比较大如何优化

137•子组件里面可以修改父组件的值吗

138.生命周期钩子是如何实现的

139.vue是怎么检测数组的变化的

14O.vue组件渲染和更新的过程

141.vue为什么要使用异步组件

142.vue如何快速定位那个组件出现性能问题的

143.v-html会导致那些问题

144.v・el作用

145.说说vue的动态组件

146.怎么定义vue・router的动态路由？怎么获取传过来的值?

147.自定义指令

1.Vue和React有什么不同？使用场景分别是什

么？

•vue是双向绑定

•react没有数据双向绑定，react是单向数据流

使用场景：

react：期待构建大型应用程序，期待同时适用与web端和原生

app的框架，期待最大的生态系统

vue：期待模板搭建应用，期待简单和能用就行的东西，期待应

用尽可能的小和快

推

荐1024程序员节I做不被定义的开发者

内

参与文武状元大同关，赢取Switch游戏机等好礼

容

2.axios是什么？怎么使用匕，怎么解决跨域?

是什么？

•Axios是一个基于promise的HTTP库，可以用在浏览器

和node.js小。前端最流行的ajax请耒库，

•react/vue官方都推荐使用axios发ajax请求

特点：

•基于promise的异步ajax请求库,支持promise所有的

API

•浏览器端/node端都可以使用，浏览器中创建

XMLHttpRequests

■支持请求/响应拦截器

•支持请求取消

•可以转换请求数据和响应数据，并对响应回来的内容自动

转换成JSON类型的数据

•批量发送多个请求

•安全性更高，客户端支持防御XSRF,就是让你的每个请

求都带一个从cookie中拿到的key,根据浏览器同源策略，

假冒的网站是拿不到你cookie中福key的，这样，后台就可

以轻松辨别出这个请求是否是用户在假冒网站上的误导输

入，从而采取正确的策略。

常用语法:

•axios(config):通用/最本质的发任意类型请求的方式

•axios(url[,config]):可以只指定url发get请求

•axios.request(config):等I司于axios(config)

•axios.get(url[,config]):发get请求

•axios.delete(url[,config]):发delete请求

•axios.post(url[,data,config]):发post请求

•axios.put(url[,data,config]):发put请求

•axios.defaults.xxx:请求的默认全局配置

•erceptors.request.use():添加请求拦截器

•erceptors.response.useO：添加响应拦截器

•axios.create([config]):创建一个新的axios(它没有下面的

功能)

•axios.Cancel():用于创建取消请求的错误对象

•axios.CancelToken():用于创建取消请求的token对象

•axios.isCancel():是否是一个取消请求的错误

•axios.all(promises):用于批量执行多个异步请求

•axios.spread():用来指定接收所有成功数据的回调函数的

方法

3.说说Vue,React,angularjs,jquery的区别

1.JQuery与另外几者最大的区别是JQuery是事件驱动，其

他两者是数据驱动

2.JQuery业务逻辑和UI更该混在一起，UI里面还参杂着交

互逻发，让本来混沌的逻辑更加混乱

3.Angular,Vue是双向绑定，而React不是

4.什么阶段（生命周期）才能访问操作dom?为

什么

在钩子函数mounted。中才能开始访问操作dom,因为在

mounted。生命周期前，dom刚好渲染好，但还未挂载到页面，

如果在这之前进行dom操作，将找不到dom节点

5.组件中的data为什么是个函数？

因为组件是用来复用的，因为js里对象是引用关系，如果data

是对象形式，那么data的作用域是没有隔离的，在多个子组件

时，会被外部因素影响，如果data是一个函数，那么每个实例

可以独自拥有一份返回对象的拷贝，组件实例之间的data属性

值不会互相影响

6.说一说scoped样式隔离

Vue在创建组件的时候，会给组件生成唯一的id值，当style标签

给scoped属性时，会给组件的html节点都加上这个id值标识，

如data-v4d5aa038,然后样式表会根据这id值标识去匹配样

式，从而实现样式隔离

7.v-if与v-show的区另ij?

相同点：

•v・show和v“嘟能控制元素的显示和隐藏。

不同点:

•实现本质方法不同:v-show本质就是通过设置css中的

display设置为none;控制隐藏v』f是动态的向DOM树内添加

或者删除DOM元素；

•v・show都会编译，初始值为false,只是将display设为

none,但它也编译了;v-计初始值为false,就不会编锋了

总结：v-show只编译一次，后面其实就是控制css,而v-if不停

的销毁和创建，如果要频繁切换某节点时，故v・show性能更好

一点。

8.什么是MVVM?

model-view-viewModel(MV\/M)是一个软件架构设计模式，能

够实现前端开发和后端业务逻辑的分离，其中model指数据模

型，负责后端业务逻辑处理，view指视图层，负责前端整个用

户界面的实现，viewModel则负责view层和model层的交互

9.Vue修饰符有哪些?

1.事件修饰符：

•stop阻止事件继续传播

•.prevent阻止标签默认行为

•.capture使用事件捕获模式，即元素自身触发的事件先在

此处处理，然后才交由内部元素进行处理

•.self只当在event.target是当前元素自身时触发处理函数

•.once事件将只会触发一次

­.passive告诉浏览器你不想阻止事件的默认行为

2.v・model的修饰符：

•.lazy通过这个修饰符，转变为在change事件再同步

•.number将自动过滤用户的输入值转化为数值类型

•.trim自动过滤用户输入的首位空格

3,键盘事件的修饰符：

•.enter回车

•.tab

•.delete删除或回退

•.esc

•.space空格

•.up上键

•.down下键

•.left左键

•.right右键

4•系统修饰符:

•.Ctrl

•.alt

•.shift

•.meta

5.鼠标按钮修饰符:

•deft

•.right

•.middle

10.函数式组件使用场景和原理

函数式组件与普通组件的区别：

­函数式组件需要在声明组件是指定functional：true

•不需要实例化，所以没有this,this通过render函数的第二

个参数context来代替

•没有声明周期钩子函数，不能使用计算属性，watch

•不能通过$。01让对外暴露事件，调用事件只能通过

context.listeners.click的方式调用外部传入的事件

•因为函数式组件是没有实例化的，所以在外部通过ref去引

用组件时，实际引用的是HTMLEIement

­函数式组件的props可以不用显示声明，所以没有在props

里面声明的属性都会被自动隐式解析为prop,而普通组件所

有未声明的属性都解析到$attrs里面，异自动挂载到组件

根元素上面（可以通过inheritAttrs属性禁止）

复制代码

优点:

•由于函数组件不需要实例化，无状态，没有生命周期，所

以渲染性能要好于普通组件

•函数式组件结构比较简单，代码结构更清晰

使用场景：

1.一个简单的展示组件，作为容器组件使用比如router­

view就是一个函数式组件

2.高阶组件…用于接收一个组件作为参数，返回一个被包装

过的组件

11.能说下vue-router中常用的路由模式实现原理

吗？

hash模式：

1.location.hash的值实际就是11乱中#后面的东西，它的特

点在于：hash虽然出现URL中，但不会被包含在HTTP请

求中，对后端完全没有影响，因此改变hash不会重新加

载页面

2.可以为hash的改变添加监听事件，每一次改变hash

(window.location.hash)都会在浏览器的访问历史中增

加一个记录利用hash的以上特点，基于可以来实现前端

路由“更新视图但不重新请求页面”的功能了

history模式：

利于了HTM5HistoryInterface中新增的pushState()和replaceState()

方法，这两个方法应用与浏览器的历史记录栈，在当前已有的back,

forward,go的基础之上，它们提供了对历史记录进行修改的功能，

这两个方法有个共同的特点：当调用他们修改浏览器历史栈后，虽然

URL改变了，但浏览器不会刷新页面，这就为但也应用前端路由“更

新视图但不重新请求页面”提供了基础

12.GET和POST的区别

1.get参数通过url传递，post放在requestbody中

2.get请求在url中传递的参数是有K度限制的，而post没有

3.post比get更安全，因为get参数都暴漏在url中，所以不能

用来传递敏感信息

4.get请求只能进行url编码，而post支持多种编码方式

5.get请求会浏览器主动cache,而post支持多种编码方式

6.get请求参数会被完整保留在浏览器历史记录里，而post

中的参数不会被保留

7.get和post本质上就是TCP链接，并无差别，但由于HTTP

的规定和浏览器/服务器的限制，导致他们在应用过程中

体现出一些不同

8.get产生一个TCP数据包；post产生两个

13.cookie和seesion区另U

1.cookie数据存放在客户的浏览器上，session存放在服务

器

2.cookie不是很安全，别人可以分析存放在本地的COOKIE

进行COOKIE欺骗，考虑安全应该使用seesion

3.session会在一定事件内保存在服务器上，当访问增多，

会比较占用你的服务器的性能，考虑到减轻服务器性能方

面，应当使用cookie

4.单个cookie保存的数据不能超过4k,很多浏览器都限制一

个站点最多保存20个cookie

14.跨域的方法

浏览器为了安全机制，采用同源策略，域幺，协议，端口号一致的才

可以进行访问；

1.jsonp：是通过script标签的src属性来实现跨域的，通过

src《过去一个函验，把数据放在函数的实参调用就可以

拿到数据，由于是用src的链接，所以jsonp只支持get方式

2.cors：改变请求头信息，客户端加：Origin:地址。服务

器：人区05$・(3011注016110亚-0时11：地址,支持旧10以上。

3.webpack:devServer里配置proxy:{api:'地址'};

4.nginx反向代理：

nginx.conf

upstreamtomcatserver{

server9;8081〃3.找到代理服务器

)

server]

listen80;

server_name8081.;//7.客户端调用名

location/{

proxy_passhttp：//tomcotserver;//2.

indexindex.htmlindex.html;

15.Vue组件通信有哪些方式

1.父传子：props

父组件通过props向下传递数据给子组件。注：组件中的数据

共有三种形式：data、props、computed

2,父传子孙;provide和inject

父组件定义provide方法return需要分享给子孙组件的属性，子

孙组件使用inject选项来接收指定的我们想要添加在这个实例

上的属性；

3.子传父：通过事件形式

子组件通过$emit()给父组件发送消息，父组件通过v-on绑定事

件接收数据。

4.父子、兄弟、跨级：eventBus.js

这种方法通过一个空的Vue实例作为中央事件总线(事件中

心)，用它来(emit)触发事件和(emit)触发事件和

(emit)触发事件和(on)监听事件，巧妙而轻量地实现了任

何组件间的通信。

5.通信插件：PubSub.js

6.vuex

vuex是vue的状态管理器，存储的数据是响应式的。只需要把

共享的值放到vuex中，其他需要的组件直接获取使用即可；

16.Vue的优点是什么？

・轻量级框架：只关注视图层，是一个构建数据的视图集

合，大小只有几十kb

•简单易学：国人开发，中文文档，不存在语言障碍，易于

理解学习

■双向数据绑定：保留了angular的特点，在数据操作方面更

为简单

•组件化：保留了react的优点，实现了html的封装和重用，

在构建单页面应用方面有着独特的优势

•视图，数据，结构分离：使数据的更改更为简单，不需要

进行逻辑代码的修改，只需要操作数据就能完成相关操作

■虚拟DOM：dom操作是非常耗费性能的，不再使用原生

dom操作节点，极大解放dom操作，但具体操作的这是

dom不过是换了另一种方式

•运行速度更快：相比较于react而言，同样是操作虚拟

dom,就性能而言，vue存在很大优势

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

作用：解析和转换.vue文件。提取出其中的逻辑代码script,样式代码

style,以及HTML模板template,再分别把他们交给对应的loader去处

理

用途：js可以写es6,style样式可以scss或less,template可以加js

特性：

1、允许为Vue组件的每个部分使用其它的webpackloader,

例如在

css-loader：力口载由vue-loader提取出的CSS代码

vue-template-compiler：ft!vue-loader提取出的HTML模板编译

成可执行的javascript代码

18.你的接口请求一般放在哪个生命周期中？

接口请求一般放在mounted中，在html渲染后调用，但需要注意的是

服务端渲染时不支持mounted,需要放至^created中

19.说一下指令v・el的作用是什么？

提供一个在页面上以存在的DOM元素作为Vue实例的挂载目标，可以

是CSS选择器，也可以是一个HTMLEIement实例

20.说几种如何实现vue首屏加载优化的

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

2.vue路由的懒加载

3.vue组件尽量不要全局引入

4,使用轻量级的工具库

21.请说出vue.cli项目中src目录每个文件夹和文

件的用法？

1.assets文件夹是放静态资源；

2.components是方组件；

3.router是定义路由相关的配置

4.view是视图

5.app.vue是一个应用主组件

6.main.js是入口文件

22.$route和$router的区别

router为VueRouter的实例，相当于一个全局的路由器对象，里面含

有很多属性和子对象，例如history对象。。。经常用的跳转链接就可

以用this.$router.push,和router-link跳转一样。

route相当于当前正在跳转的路由对象…可以从里面获取name,pat

h,params,query等

23.对于vue3.0特性你有什么了解吗？

vue3.0的目标是让Vue核心变得更小，更快，更强大

24.虚拟DOM的优缺点

优点：

1.保证性能下线

2.无需手动操作DOM

3.跨平台

缺点:

1,无法进行极致优化

25.虚拟DOM实现原理

用JavaScript对象模拟真实DOM树，对真实DOM进行抽象

diff算法：比较两棵虚拟树的差异

pach算法：将两个虚拟DOM对象的差异应用到真实的DOM树

26.直接给一个数组项赋值，Vue能检测到变

化吗?

由于JavaScript的限制，Vue不能检测到以下数组的变动:

1.当你利用索引直接设置一个数组项时

2.当你修改数组的长度时

27.简述原型与原型链，原型链的作用有哪些？

每一个类都是一个显示原型prototype

每一个类都有一个隐式原型_proto

实例的」3roto_等于类的显示原型prototype

当去查找一个实例的属性或方法，先在自身查找，找不到则沿着_pr

Oto—向上查找

我们把原型_proto_与原型_proto_形成的链条关系叫做原型链

作用是：实现了JS的继承，让实列拥有了类的公用方法

28.普通函数，箭头函数的区别

1.箭头函数没有原型，原型是undefined

2.箭头函数this指向全局对象，而函数指向引用对象

3.call,apply,bind方法改变不了箭头函数的指向

29.怎样理解Vue的单向数据流？

数据总是从父组件传到子组件，子组件没有权利修改父组件传过来的

数据，只能请求父组件对原数据进行修改

30.vue・router是什么？有哪些组件？

VueRouter是Vue.js官方的路由管理器。它和Vue.js的核心深度集

成，让构建单页面应用变得易如反掌

<router-link>fn<router-view>fn<keep-alive>

31.Vuex解决了什么问题？

解决两个问题

1.多个组件依赖于同一状态时，对于多层嵌套的组件的

传参将会非常繁琐，并且对于兄弟组件间的状态传递

无能为力

2.来自不同组件的行为需要变更同一状态,

32.什么时候用Vuex

如果应用够简单，最好不耍使用Vuex,一个简单的store模式即

可；

需要构建一个中大型单页应用时，使用Vuex能更好地在组件外部管

理状态

当项目遇到多个组件依赖于同一状态时，来自不同组件的行为需要变

更同一状态

33.Vuex中状态存储在那里？怎么改变它

存储在state中，改变Vuex中的状态的唯一途径就是显式地提交(com

mit)mutation

34“113和10116「丫的区别在哪？为什么放弃JQuer

y角Vue?

1.JQuery是直接操作DOM,Vue不直接操作DOM,Vue的

数据与视图是分开的，Vue只需要操作数据就行了

2.在操作DOM频繁的场景里，JQuery的操作DOM行为是频

繁的，而Vue利用虚拟DOM的技术，大大提高了更新

DOM时的性能

3.Vue中不提倡直接操作DOM,开发者只需要把大部分精力

放在数据层面上

4.Vue集成的一些库，大大提高开发效率，比如Vuex,

Route噂

35.slot插槽

slot插槽，可以理解为slot在组件模板中提前占据了位置，当复用组件

时，使用相关的slot标签时，标签里的内容就会自动替换组件模板中

对应slot标签的位置，作为承载分发内容的出口

主要作用是：复用和扩展组件，做一些定制化组件的处理

36.v・if和v・for为什么不建议一起使用？

vue2.x版本中,当v・if与vdor一起使用时,v・for具有比v・if更高的

优先级；

vue3.xM本中，当v-if与v-for一起使用时，v-if具有比v-for更高的

优先级。

官网席就指出：避免v-if和v-for一起使用，永远不要在一个元素上

同时使用v-if和v・for。

可以先对数据在计算数据中进行过滤，然后再进行遍历渲染；

操作和实现起来都没有什么问题，页面也会正常展示。但是会带来不

必要的性能消耗；

37.vue初始化页面闪动问题什么原因怎么解决？

使用vue开发时，在vue初始化之前，由于div是不归vue管的,

所以我们写的代码在

还没有解析的情况下会容易出现花屏现象，看到类似于

{{message}}的字样，虽然一般情

况下这个时间很短暂，但是会影响用户的体验。

解决方法:在css里加上

[v-clok]{

display:none;

)

<divid="appMv-cloak>

38.Vue的两个核心点

数据驱动，组件系统

数据驱动：ViewModel,保证数据和视图的一致性

组件系统：应用类UI可以看作全部是由组件树构成的

39.什么是闭包，用途有哪些?

定义在一个函数内部的函数。其中一个内部函数在包含它们的外部函

数之外被调用时，就会形成闭包。

用途：1,模仿块级作用域，2.存储变量，3,封装私有变量

40.组件间的通讯

1.props/$emit

父组件A通过props的方式向子组件B传递，Bt。A通过在B组件

中$311113A组件中v-on的方式实现

2.$emit/$on

通过一个空的Vue实例作为中央事件总线，用它来触发事件和

监听事件，轻量地实现了任何组件间的通信

3.vuex

4.$attrs/$listeners

当一个组件没有声明任何prop时，可以通过v-bind=*,$attrsM

传入内部组件

41.Promise的作用

Promise是一种常用的异步解决方案，解决回调地狱的问题。

42.m叩与set的区别

I.Set是一种叫做集合的数据结构，Map是一种叫做字典的数

据结构0

2.set是以［value］的形式储存元素,字典是以［key：value］的

形式储存

43.构造函数与普通函数的区别

1.命名方式

构造函数名称通常首字母要大写

普通函数名称首字母要小写，使用驼峰命名方式。

2.this的指向问题

构造函数的this会绑定到创建的对象实例上；

普通函数的this则属于此函数的调用者；

3.调用方式的不同

构造函数需要使用new运算符调用，如果构造函数没有参数

可以省略小括号，比如newObject；

普通函数的调用不需要new运算符，而且必须有小括号。

比如：function。。；

44.hash与history的区另ij

直观区别：hash模式刈带#号，history模式不带#号。

如果后台没有做相应配置,history页面会在再次刷新的时候，报404错

误；

45.vue常用指令？

1.v-model多用于表单元素实现双向数据绑定

2.v-bind：简写为：，动态绑定一些元素的属性，类型可以

是：字符串、对象或数组。

3.v・on:click给标签绑定函数，可以缩写为@,例如绑定一

个点击函数函数必须写在methods里面

4.v-for格式：v-for="字段名in(of)数组json”循环数组或

json

5.v-show显示内容

6.v・else指令：和v・if指令搭配使用,没有对应的值。当v・if

的值false,v-else才会被渲染出来

7.vJf指令：取值为tiw/false,控制元素是否需要被渲染

8.v-else-if必须和v/f连用

9.v・else指令：和指令搭配使用，没有对应的值.当vJf

的值false,v-else才会被渲染出来

10.v-text解析文本

11.v-html解析html标签

12.v・bind:class三种绑定方法1、对象型'{red:isred}'2、三

元型,isred?,,red,,:,'blue,H3、数组型,[{red:HisredH},

{blue:“isblue”}T

13.v-once进入页面时只渲染一次不在进行渲染

14.v-cloak防止闪烁

15.v-pre把标签内部的元素原位输出

46.Vue父子组件的生命周期顺序

加载渲染过程：父138。「。。0216・＞父（^2伯€1・＞父1380迨1\?1011爪・

^beforeCreate，子created-＞子beforeMount-＞子mounted-〉

父mounted

子组件更新过程：父beforeUpdate->子beforeUpdate，子

updated->>Cupdated

父组件更新过程：父beforeUpdate，父updated

销毁过程：父beforeDest「oy->子beforeDestroy，子

destroyed->父destroyed

47.vue-router路由的两种模式

vue-router中默认使用的是hash模式

hash模式，带#。如：http://localhost:8080/#/pageAo改变hash,浏

览器本身不会有任何请求服务器动作的，但是页面状态和url已经关联

起来了。

history模式，不带#,如：http:〃localhost:8080/正常的而路径，并

没有#。基于HTML5的pushState、replaceState实现

.vue中keep-alive组件的作用

＜keep-alive＞是Vue的内置组件，能在组件切换过程中将状态保留在

内存中，防止重复渲染DOM。

vkeep-alive＞包裹动态组件时，会缓存不活动的组件实例，而不是

销毁它们。

49.v・show和指令的共同点和不同点

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

v-show指令是通过修改元素的display的CSS属性让其显示或者隐藏

v-时旨令是直接销毁和重建DOM达到让元素显示和隐藏的效果

5O.Vue.extend作用和原理

官方解释：Vue.extend使用基础Vue构造器，创建一个“子类”。参

数是一个包含组件选项的对象。

其实就是一个子类构造器，是Vue组件的核心api。实现思路就是使用

原型继承的方法返回了vue的子类，并且利用mergeOptions把传入

组件

51.异步同步

同步：向服务器发送请求，必须等请求到内容，才能刷新页面，用户

才能看到新内容

异步：向服务器发送请求，这时可以做其他事情，内容请求到时，用

户不用刷新页面，也可以看到新内容

52.Vue.set方法原理

1.在实例创建之后添加新的属性到实例上（给响应式对象新增

属性）

2,直接更改数组下标来修改数组的值。

53.不用Vuex会带来什么问题？

可维护性会下降，想修改数据要维护三个地方；

可读性会下降，因为一个组件里的数据，根本就看不出来是从哪来

的；

增加耦合，大量的上传派发，会让耦合性大大增加，本来Vue用Com

ponent就是为了减少耦合，现在这么用，和组件化的初衷相背。

54.对SSR有了解吗，它主要解决什么问题？

Server-SideRendering我们称其为SSR,意为服务端渲染指由服务

侧完成页面的HTML结构拼接的页面处理技术，发送到浏览器，然

后为其绑定状态与事件，成为完全可交互页面的过程；

解决了以下两个问题：

■seo：搜索引擎优先爬取页面HTML结构,使用ssr时，服

务端已经生成了和业务想关联的HTML,有利于se。

•首屏呈现渲染：用户无需等待页面所有js加载完成就可以

看到页面视图（压力来到了服务器，所以需要权衡哪些用

服务端渲染，哪些交给客户端）

缺点

•复杂度：整个项目的复杂度

•性能会受到影响

•服务器负载变大，相对于前后端分离务器只需要提供静态

资源来说，服务器负载更大，所以要慎重使用

55.SSR优缺点？

优点：

SSR有着更好的SEO（搜索引擎优化）、并且首屏加载速度更

快。

缺点：

开发条件会受限制，服务器端渲染只支持beforeCreate和creat

ed两个钩子，当我们需要一些外部扩展库时需要特殊处理，服务端

渲染应用程序也需要处于Node.js的运行环境。

服务器会有更大的负载需求。

56.Vuex为什么要分模块

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。

当应用变得非常复杂时，store对象就有可能会变得相当臃肿。为了

解决以上同鼠Vuex允许我们府store分割成模块(module)o每

个模块拥有自己的state、mutation>action>getter>甚至是嵌套子

模块

57.Vuex页面刷新数据丢失怎么解决？

需要做vuex数据持久化，一般使用本地储存的方案来保存数据，可

以自己设计存储方案，也可以使用第三方插件。

推荐使用vuex-persist插件，它是为Vuex持久化储存而生的一个插

件。不需要你手动存取storage,而是直接将状态保存至cookie或者

localstorage中。

58.nextTick使用场景和原理

nextTick中的回调是在下次DOM更新循环结束之后执行的延迟回

调。在修改数据之后立即使用这个方法，获取更新后的DOM。主要

思路就是采用微任务优先的方式调用异步方法去执行nextTick包装

的方法。

59.页面渲染为什么使用key?

当有相同标签名的元素切换时，为避免渲染问题，需要通过key特性

设置唯一的值来标记以让Vue区分它们，否则Vue为了效率只会替

换相同

60.VNode是什么？虚拟DOM是什么？

Vue在页面上渲染的节点，及其子节点称为“虚拟节点(VirtualNod

e)”，简写为“VNode”。“虚拟DOM”是由Vue组件树建立起来的整个

VNode树的称呼。

61.setup组合叩i的优点

1.没有this,降低组件的耦合性，使组件复用，开发修改团队

合作更加方便

2.写更加直观，接近原生js

3.按需导入方式，节省资源

62.辅助函数的实现

根据传递过来的数组选项，循环遍历生成对应key・value,然后返回

一个对象

63.Vuex响应式

Vuex的原理是通过newVue产生实例，达到响应式数据变化的目的

state：state作为data属性$state传入，通过newVue初始化后变成

响应式数据

getters：getters本质上就是一个计算属性computed,Vuex内部会声

明一个computed对象，

然后将getters遍历成keyvalue形式，添加到computed上，最后

通过newvue处理

64.Vue项目性能优化

1.v-if和v・for区分使用场景

2.computed和method区分使用场景

3.v・for遍历必须为item添加key,且避免同时使用vif

4.懒加栽

5.事件的销毁

6.第三方模块按需导入

7.SPA页而采用keep・alive缓存组件

8.路由懒加载

组件的延迟加载，可以把页面资源划分为多份，用到的时

候才会按需加载，这样减少第一次加载的消耗。

9.对于短时间的大量操作（缩放、滚动）使用防抖、节流函

薮

10.代码精简，去除console,可复用的方法、组件提取出来

11.不要写行内样式，避免dom重绘

12.key保证唯一性

13.v・if当值为false时内部指令不会执行，具有阻断功能，很多

情况下使用vTf替代v-show

14.服务端渲染ssr

65.vue-router路由模式有几种?

vue-router有3种路由模式：hash、history、abstract

Lhash:使用URLhash值来作路由。支持所有浏览器，包括不支持

HTML5HistoryApi的浏览器；

2.history:依赖HTML5HistoryAPI和服务器配置。具体可以查看H

TML5History模式；

3.abstract:支料所有JavaScript运行环境，如Node.js服务器端。

如果发现没有浏览器的API,路由会自动强制进入这个模式.

66.vue生命周期钩子函数有哪些?

1.创建前:beforeCreate

2.创建后：created

3,挂载前：beforeMount

4.挂载后：mounted

5.更新前：beforeUpdate

6.更新后：updated

7.销毁前:beforeDestroy

8.销毁后：destroyed

67.Vue.js有什么特点？

1.简洁：页面由HTML模板+JSON数据+Vue.js实例化对象组

成。

2.数据驱动：自动计算属性和追踪依赖的模板表达式。

3.组件化：用可复用、解耦的组件来构造页面。

4,轻量：代码量小，不依赖其他库。

5,快速：精确而有效地批量实现DOM更新。

6.易获取：可通过npm、bower等多种方式安装，很容易融入

68.axios是什么？如何使用它？

axios是在vue2.0中用来替换vue-resou「ce.js插件的一个模块，是一

个请求后台的模。

（axios另一种解释：易用、简洁旦高效的http库，支持node端和浏览

器端，支持Promise,支持拦截器等高级配置）

用npminstallaxios安装axioso基于EMAScript6的EMAScriptMo

dule规范，通过import关键字将axios导入，并添加到Vue.js美的原

型中。

这样每个组件(包括vuejs实例化对象)都将继承该方法对象。它定

义了get、post等方法，同以发送get戢者post请家。

在then方法中注册成功后的回调函数，通过箭头函数的作用域特征，

可以直接访问组件实例化对象，存储返回的数据。

69.如何在Vue.js中循环插入图片？

对“src”属性插值将导致404请求错误。应使用v・bind:src格式代替。

70.如何解决数据层级结构太深的问题

在开发业务时.，经常会出现异步获取数据的情况，有时数据层次比较

,M,,

深，如以下代码：spanv-text=a.b.c.dx/span>J

可以使用vm.$set手动定义一层数据：vm.$set("demo"，a.b.c.d)

71.如何让CSS只在当前组件中起作用?

在组件中的style前面加上scoped

72.vue-router是什么？它有哪些组件

vue用来写路由一个插件。router-linksrouter-view

73.在哪个生命周期内调用异步请求？为什么？优

点？

1.可以在钩子函数created、beforeMount、mounted中进行调用,

（推荐使用created钩子函数）

原因：此时data已经创建，可以将服务端返回的数据进行赋值

2.created钩子函数中调用异步请求优点：

能更快获取到服务端数据，减少页面loading时间；

3.ssr不支持beforeMountsmounted钩子函数，所以放在created

中有助于一致性；

74.computed和watch的区别和运用的场景？

区别：

1.computed：是计算属性，依赖其它属性值，并且computed的值

有缓存，只有它依赖的属性值发生改变，下一次获取computed的

值时才会重新计算computed的值；

2.watch：更多的是「观察」的作用，类似于某些数据的监听回调，

每当监听的数据变化时都会执行回调进行后续操作；

运用场景:

L当我们需耍进行数值计算，并且依赖于其它数据时，应该使

用computed,因为可以利用computed的缓存特性，避免每

次获取值时，都要重新计算；

2.当我们需要在数据变化时执行异步或开销较大的操作时，应

该使用watch,使用watch选项允许我们执行异乐操作（访问

一个API）,限制我们执行该操作的频率，并在我们得到最终

结果前，设置中间状态。这些都是计算属性无法做到的。

75.Vue的父组件和子组件生命周期钩子函数执

行顺序？

1.加载渲染过程父beforeCreate->父created->父

beforeMount->子beforeCreate->子created->子

beforeMount->子mounted->父mounted

2.子组件更新过程父beforeUpdate->子beforeUpdate->子

updated->父updated

3,父组件更新过程父beforeUpdate->父updated

4,销毁过程父beforeDestroy->子beforeDestroy->子

destroyed->父destroyed

76.v-model的原理?

v-model本质上不过是语法糖，v-model在内部为不同的输入元素使

用不同的属性并抛出不同的事件

77.vuex有哪几种属性

有五种，分别是State,Getter,Mutation,Action,Module(就是mapA

ction)

1.state：vuex的基本数据，用来存储变量

2.geeter：从基本数据(state)派生的数据，相当于state的计算

属性

3.mutation：提交更新数据的方法，必须是同步的(如果需要异

步使用action)°每个mutation兼有一个字符串的事件类型

(type)和一个回调函数(handler)o回调函数就是我们实际进

行状态更改的地方，并且它会接受state作为第一个参数，提

交载荷作为第二个参数。

4.action：和mutation的功能大致相同，不同之处在于==》1.

Action提交的是mutalon,而不是直接变更状态。2.Action可

以包含任意异步操作。

5.modules：模块化vuex,可以让每一个模块拥有自己的

statexmutation、action、getters液得结构非常清晰,方便管

理。

78.vuex的getter特性是什么

getter可以对state进行计算操作，它就是store的计算属性

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

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

79.vue2.x中如何监测数组变化

使用了函数劫持的方式，重写了数组的方法，Vue将data中的数组进

行了原型链重写，指向了自己定义的数组原型方法。

这样当调用数组api时，可以通知依赖更新。如果数组中包含着引用

类型，会对数组中的引用类型再次递归遍历进行监控。

这样就实现了监测数组变化。

80.可以被vue拦截到的数组方法以及不能被拦截

到的数组方法？

会：push()pop()shift()unshift()splice()sort()reverse()会检测变动

进行页面萤新

不会：filter。concat()slice。map()新数组替换旧数组不会改变原数

组，页面不更新不会被拦截

Vue.set/this.$set强制更新

81.谈谈单页面(SPA)的理解?

•SPA(singlepageapplication)仅在Web页面初始化时

加载相应的HTML、JavaScript和CSS。

•一旦页面加载完成，SPA不会因为用户的操作而进行页面

的重新加载或跳转

•而页面的变化是利用路由机制实现HTML内容的变换，避

免页面的重新加载。

优点:

・用户体验好，内容的改变不需要重新加载整个页面，避免

了不必要的跳转和重复渲染

•减少了不必要的跳转和重复渲染，这样相对减轻了服务器

的压力

•前后端职责分离，架构清晰，前端进行交互逻辑，后端负

责数据处理

缺点:

•初次加载耗时多

・不能使用浏览器的前进后退功能，由于单页应用在一个

页面中显示所有的内容，所以，无法前进后退

•不利于搜索引擎检索：由于所有的内容都在一个页面中

动态替换，所以在SEO上有着天然的弱势

82.谈谈你对Vue生命周期的理解？

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

beforecreate（初始化界面前）

created（初始化界面后）

beforemount（渲染界面前）

mounted（渲染界而后）

beforeUpdate（更新数据前）

updated（更新数据后）

beforedestory（卸载组件前）

destroyed（卸载组件后）

newVue()

(txforyr0<•)

init

wtwn

vm4mount(el)

Compiletempiat®CompileMs

Into

renderfunction'gtemptatc•

83.Class与Style如何动态绑定？

Style也可以通过对象语法和数组语法进行动态绑定

Class可以通过对象语法和数组语法进行动态绑定

84.vue-router路由钩子函数是什么？

钩子函数种类有：

全局的路由钩子函数：beforeEach>afterEach（一般用于全局进行

权限跳转）

单个的路由钩子函数:beforeEnterxbeforeLeave（路由内部钩子,

一般在路由表里）

组件内的路由钩子函数：beforeRouteEnter.beforeRouteLeave.b

eforeRouteUpdate

beforeEach：每一次路由该变的之后页面加载之前执行，三个

参数（to将要进入的路由对豪、from即将离开的路由对象、

next跳转方法），next必须调用afterEach：

每一次路由该变的之后页面加载之后执行；两个参数（t。将要

进入的路由对象、from即将离开的路由对象）beforeEnter：

进入指定路由跳转时需要执行的逻辑beforeLeave：离开指定

路由跳转时需要执行的逻辑beforeRouteEnter、

beforeRouteLeave>beforeRoutellpdate都是写在组件里面，

也有三个参数（to、from、next）

85.Vue3.0和2.0的响应式原理区别

Vue3.x改用Proxy替代Object.defineProperty0因为Proxy可以直

接监听对象和数组的变化，

并且有多达13种拦截方法。

6.axios和ajax的区另U：

axios是通过promise实现对ajax技术的一种封装，就像jQuery实现aja

简单来说:ajax技术实现了网页的局部数据刷新，axios实现了对aja

x的封装。axios是ajaxajax不止axios。

7.vue中解决跨域问题

方法1.后台更改header

方法2.使用JQuery提供的jsonp

方法3,使用http-proxy-middleware代理解决（项目使用vue・cli

脚手架搭建）

；.vue的原理

Vue的模式是m・v・vm模式,即（model-view-modelView）,

通过modelView作为中间层（即vm的实例），进行双向数据的绑定

与变化。

89.watch>methods和computed的区别？

1.watch为了监听某个响应数据的变化。computed是自动监听依赖

值的变化，从而动态返回内容，主要目的是简化模板内的复杂运算。

所以区别来源于用法，只是需要动态值，那就用computed；需要知

道值的改变后执行业务逻辑，才用watch。

2.methods是一个方法，它可以接受参数，而computed不能，comp

uted是可以缓存的，methods不会。computed前以依赖其他comp

uted,甚至是其他组件的data。

90.webpack有哪些优点？

专注于处理模块化的项目，能做到开箱即用，一步到位

可通过plugin扩展，完整好用又不失灵活

使用场景不局限于web开发

社区庞大活跃，经常引入紧跟时代发展的新特性，能为大多数场景找

到已有的开源扩展

良好的开发体验

91.Vue生命周期钩子是如何实现的

LVue的生命周期钩子就是回调函数而已，当创建组件实例的过程中

会调用对应的钩子方法。

2,内部会对钩子函数进行处理，将钩子函数维护成数组的形式

92.Vue的双向数据绑定原理是什么？

vue.js是采用数据劫持结合发布者■订阅者模式的方式，通过Object.d

理ineProperty()来劫持各个属性的setter,getter,在数据变动时发布

消息给订阅者，触发相应的监听回调。

93.在webpack中，为什么要打包发布?

1.开发环境下，打包生成的文件存放于内存中，无法获取最终

打包生成的文件

2.开发环境下，打包生成的文件不会进行代码压缩和性能优化

94.路由守卫

全局守卫：

l.beforEach全局前置守卫

2.afterEach全局后置守卫

3.beforeResolve全局解析守卫

独享守卫：

1.beforeEnter单个路由守卫

组件内部守卫：

l.beforeRouterEnter无法获取组件this

2.beforeRouteUpdate当前路由改变，但组件被复用时调用;

例：foo/1=>foo/2

3.beforeRouteLeave离开后，禁止用户在未保存修改前离开

95.SPA首屏加载速度慢的怎么解决?

首屏时间(FirstContentfulPaint),指的是浏览器从响应用户输入

网址地址，到首屏内容渲染完成的时间，此时整个网页不一定要全部

渲染完成，但需要展示当前视窗需要的内容；

加载慢的原因:

•网络延时问题

•资源文件体积是否过大

­资源是否重复发送请求去加载了

•加载脚本的时候，渲染内容堵塞了

常见的几种SPA首屏优化方式

•减小入口文件积

•静态资源本地缓存

•UI框架按需加载

■图片资源的压缩

­组件重复打包

•开启GZip压缩

•使用SSR

96.Vue初始化过程中(newVue(options))都

做了什么？

•处理组件配置项；初始化根组件时进行了选项合并操作，

将全局配置合并到根组件的局部配置上；初始化每个子组

件时做了一些性能优化，将组件配置对象上的一些深层次

属性放到vm.$options选项中，以提高代码的执行效率；

•初始化组件实例的关系属性，比如parent、parent、

parent、children、root、root>root>refs等

•处理自定义事件

•调用beforeCreate钩子函数

•初始化组件的inject配置项，得至Iret[key]=val形式的配

置对象，然后对该配置对象进行响应式处理，并代理每个

key到vm实例上

•数据响应式，处理props>methods>data、computed>

watch等选项

■解析组件配置项上的provide对象，将其挂载到

vm.jDrovided属性上

•调用created钩子函数

•如果发现配置项上有el选项，则自动调用$mount方法，

也就是说有了el选项，就不需要再手动调用$mount方

法，反之，没提供el选项则必须调用$mount

•接下来则进入挂载阶段

97.对MVVM的理解？

•MVVM由Model.View、ViewModel三部分构成，Model层代

表数据模型，也可以在Model中定义数据修改和操作的业务逻

辑；View代表UI组件，它负责将数据模型转化成UI展现出来；

ViewModel是一个同步View和Model的对象。

•在MVVM架构下，View和Model之间并没有直接的联系，而是

通过ViewModel进行交互，Model和ViewModel之间的交互是

双向的，因此View数据的变化会同步到Model中，而M