Vue面试题整理

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

vue是双向绑定；react没有数据双向绑定，react是单向数据流；
使用场景：
react：期待构建大型应用程序，期待同时适用与web端和原生app的框架，期待最大的生态系统
vue：期待模板搭建应用，期待简单和能用就行的东西，期待应用尽可能的小和快

axios是什么？

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。前端最流行的 ajax 请求库，
react/vue 官方都推荐使用 axios 发 ajax 请求
特点:

• 基于 promise 的异步 ajax 请求库，支持promise所有的API
• 浏览器端/node 端都可以使用，浏览器中创建XMLHttpRequests
• 支持请求／响应拦截器
• 支持请求取消
• 可以转换请求数据和响应数据，并对响应回来的内容自动转换成 JSON类型的数据
• 批量发送多个请求
• 安全性更高，客户端支持防御 XSRF，就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。

说说axios的常用方法

axios(config): 通用/最本质的发任意类型请求的方式
axios(url[, config]): 可以只指定 url 发 get 请求
axios.request(config): 等同于 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: 请求的默认全局配置
axios.interceptors.request.use(): 添加请求拦截器
axios.interceptors.response.use(): 添加响应拦截器
axios.create([config]): 创建一个新的 axios(它没有下面的功能)
axios.Cancel(): 用于创建取消请求的错误对象
axios.CancelToken(): 用于创建取消请求的 token 对象
axios.isCancel(): 是否是一个取消请求的错误
axios.all(promises): 用于批量执行多个异步请求
axios.spread(): 用来指定接收所有成功数据的回调函数的方法

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

在钩子函数mounted()中才能开始访问操作dom，因为在mounted()生命周期前，dom刚好渲染好，但还未挂载到页面，如果在这之前进行dom操作，将找不到dom节点

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

因为组件是用来复用的，因为js里对象是引用关系，如果data是对象形式，那么data的作用域是没有隔离的，在多个子组件时，会被外部因素影响，如果data是一个函数，那么每个实例可以独自拥有一份返回对象的拷贝，组件实例之间的data属性值不会互相影响

说一说scoped样式隔离

Vue在创建组件的时候，会给组件生成唯一的id值，当style标签给scoped属性时，会给组件的html节点都加上这个id值标识，如data-v4d5aa038，然后样式表会根据这id值标识去匹配样式，从而实现样式隔离

v-if与v-show的区别？

相同点：v-show和v-if都能控制元素的显示和隐藏。
不同点：实现本质方法不同:v-show本质就是通过设置css中的display设置为none;控制隐藏v-if是动态的向DOM树内添加或者删除DOM元素;
v-show都会编译，初始值为false，只是将display设为none，但它也编译了;v-if初始值为false，就不会编译了
总结：v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，如果要频繁切换某节点时，故v-show性能更好一点。

什么是MVVM？

model-view-viewModel(MVVM)是一个软件架构设计模式，能够实现前端开发和后端业务逻辑的分离，其中model指数据模型，负责后端业务逻辑处理，view指视图层，负责前端整个用户界面的实现，viewModel

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.鼠标按钮修饰符：
.left
.right
.middle

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

hash模式：
location.hash的值实际就是URL中 #后面的东西，它的特点在于：hash虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面可以为hash的改变添加监听事件，每一次改变hash（window.location.hash）都会在浏览器的访问历史中增加一个记录利用hash的以上特点，基于可以来实现前端路由“更新视图但不重新请求页面”的功能了。
history模式：
利于了HTM5 History lnterface中新增的pushState()和replaceState()方法，这两个方法应用与浏览器的历史记录栈，在当前已有的back，forward，go的基础之上，它们提供了对历史记录进行修改的功能，这两个方法有个共同的特点：当调用他们修改浏览器历史栈后，虽然URL改变了，但浏览器不会刷新页面，这就为但也应用前端路由“更新视图但不重新请求页面”提供了基础。

解决跨域的方法

浏览器为了安全机制，采用同源策略，域名，协议，端口号一致的才可以进行访问;
**jsonp：**是通过script标签的src属性来实现跨域的，通过src传过去一个函数，把数据放在函数的实参调用就可以拿到数据，由于是用src的链接，所以jsonp只支持get方式
**cors：**改变请求头信息，客户端加：Origin:地址。服务器：Access-Control-Allow-Origin:地址.支持IE10以上。
**webpack:**devServer里配置proxy:{api:‘地址’};
nginx反向代理：

Vue组件通信有哪些方式

1.父传子：props
父组件通过 props 向下传递数据给子组件。注：组件中的数据共有三种形式：data、props、computed
2.父传子孙：provide 和 inject
父组件定义provide方法return需要分享给子孙组件的属性，子孙组件使用 inject 选项来接收指定的我们想要添加在这个实例上的 属性；
3.子传父：通过事件形式
子组件通过 $emit()给父组件发送消息，父组件通过v-on绑定事件接收数据。
4.父子、兄弟、跨级：eventBus.js
这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心）,用它来（e m i t ） 触 发 事 件 和 （ emit）触发事件和（emit）触发事件和（on）监听事件，巧妙而轻量地实现了任何组件间的通信。
5.通信插件：PubSub.js
6.vuex
vuex 是 vue 的状态管理器，存储的数据是响应式的。只需要把共享的值放到vuex中，其他需要的组件直接获取使用即可；

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 组件的每个部分使用其它的 webpack loader，例如在
css-loader：加载由vue-loader提取出的CSS代码
vue-template-compiler：把vue-loader提取出的HTML模板编译成可执行的javascript代码

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

接口请求一般放在mounted中，在html渲染后调用，但需要注意的是服务端渲染时不支持mounted，需要放到created中

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

提供一个在页面上以存在的DOM元素作为Vue实例的挂载目标，可以是CSS选择器，也可以是一个HTMLElement实例

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

把不常改变的库放到index.html中，通过cdn引入
vue路由的懒加载
vue组件尽量不要全局引入
使用轻量级的工具库

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

assets文件夹是放静态资源；
components是放组件；
router是定义路由相关的配置
view是视图
app.vue是一个应用主组件
main.js是入口文件

v-el作用

提供一个在页面上已存在的 DOM元素作为 Vue实例的挂载目标.可以是 CSS 选择器，也可以是一个 HTMLElement 实例,

v-html 会导致那些问题

1、可能会导致xss攻击，一定要保证你的内容是可以依赖的
2、v-html会替换掉标签内部的子元素
3、单页面文件里，scoped 样式不会作用在 v-html 内部，因为这部分内容没有被 模板编译器处理
4、v-html更新的是元素的 innerHTML 。内容按普通 HTML 插入， 不会作为 Vue 模板进行编译
5、包含的 js 不会执行，因为浏览器渲染的时候并不会渲染 js，这时要在$nextTick中动态创建script标签并插入

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

vue 把 data、props、store 等数据做成响应式，也就是会对这些响应式数据做深度监听，给每一个object类型的key（包括嵌套object）添加observer（vue3使用proxy）。所以如果我们不需要数据是响应式的，可以在.vue 文件头部直接使用 let、const 定义变量，在组件销毁的时候将该这些变量设为null。

虚拟DOM的优缺点

优点：保证性能下线；无需手动操作DOM；跨平台
缺点：无法进行极致优化

虚拟DOM实现原理

用JavaScript对象模拟真实DOM树，对真实DOM进行抽象
diff算法：比较两棵虚拟树的差异
pach算法：将两个虚拟DOM对象的差异应用到真实的DOM树

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

由于JavaScript的限制，Vue不能检测到以下数组的变动：
当你利用索引直接设置一个数组项时
当你修改数组的长度时

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

每一个类都是一个显示原型prototype
每一个类都有一个隐式原型__proto__
实例的_proto__等于类的显示原型prototype
当去查找一个实例的属性或方法，先在自身查找，找不到则沿着__proto__向上查找我们把原型__proto__与原型__proto__形成的链条关系叫做原型链
作用是：实现了JS的继承，让实列拥有了类的公用方法

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

箭头函数没有原型，原型是undefined
箭头函数this指向全局对象，而函数指向引用对象
call，apply，bind方法改变不了箭头函数的指向

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

数据总是从父组件传到子组件，子组件没有权利修改父组件传过来的数据，只能请求父组件对原数据进行修改

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

Vue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌
和和

Vuex解决了什么问题？

解决两个问题
多个组件依赖于同一状态时，对于多层嵌套的组件的传参将会非常繁琐，并且对于兄弟组件间的状态传递无能为力
来自不同组件的行为需要变更同一状态，

什么时候用Vuex

如果应用够简单，最好不要使用 Vuex，一个简单的 store 模式即可；
需要构建一个中大型单页应用时，使用Vuex能更好地在组件外部管理状态
当项目遇到多个组件依赖于同一状态时，来自不同组件的行为需要变更同一状态

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

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

slot插槽

slot插槽，可以理解为slot在组件模板中提前占据了位置，当复用组件时，使用相关的slot标签时，标签里的内容就会自动替换组件模板中对应slot标签的位置，作为承载分发内容的出口
主要作用是：复用和扩展组件，做一些定制化组件的处理

v-if和v-for为什么不建议一起使用？

vue2.x版本中，当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级；
vue3.x版本中，当 v-if 与 v-for 一起使用时，v-if 具有比 v-for 更高的优先级。
官网明确指出：避免 v-if 和 v-for 一起使用，永远不要在一个元素上同时使用 v-if 和 v-for。
可以先对数据在计算数据中进行过滤，然后再进行遍历渲染；
操作和实现起来都没有什么问题，页面也会正常展示。但是会带来不必要的性能消耗；

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

使用vue开发时，在vue初始化之前，由于div是不归vue管的，所以我们写的代码在还没有解析的情况下会容易出现花屏现象，看到类似于{{message}}的字样，虽然一般情况下这个时间很短暂，但是会影响用户的体验。
解决方法:在css里加上

Vue的两个核心点

数据驱动，组件系统
数据驱动：ViewModel，保证数据和视图的一致性
组件系统：应用类UI可以看作全部是由组件树构成的

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

定义在一个函数内部的函数。其中一个内部函数在包含它们的外部函数之外被调用时，就会形成闭包。
用途：1.模仿块级作用域，2.存储变量，3.封装私有变量

组件间的通讯

1.props/$emit父组件A通过props的方式向子组件B传递，BtoA通过在B组件中$emit，A组件中v-on的方式实现
2.$emit/$on
通过一个空的Vue实例作为中央事件总线，用它来触发事件和监听事件，轻量地实现了任何组件间的通信
3.vuex
4.$attrs/$listeners
当一个组件没有声明任何 prop 时，可以通过 v-bind=“$attrs” 传入内部组件

Promise的作用

Promise是一种常用的异步解决方案，解决回调地狱的问题。
42.map与set的区别
1.Set 是一种叫做集合的数据结构，Map 是一种叫做字典的数据结构。
2.set是以 [value]的形式储存元素，字典 是以 [key：value] 的形式储存

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

1.命名方式
构造函数名称通常首字母要大写
普通函数名称首字母要小写, 使用驼峰命名方式。
2.this的指向问题
构造函数的this会绑定到创建的对象实例上;
普通函数的this则属于此函数的调用者;
3.调用方式的不同
构造函数需要使用new运算符调用, 如果构造函数没有参数可以省略小括号, 比如new Object；
普通函数的调用不需要new 运算符, 而且必须有小括号。比如: function(){};

hash与history的区别

直观区别：hash模式url带#号，history模式不带#号。
如果后台没有做相应配置,history页面会在再次刷新的时候,报404错误;

vue常用指令？

v-model 多用于表单元素实现双向数据绑定
v-bind：简写为：，动态绑定一些元素的属性，类型可以是：字符串、对象或数组。
v-on:click 给标签绑定函数，可以缩写为@，例如绑定一个点击函数 函数必须写在methods里面
v-for 格式： v-for=“字段名 in(of) 数组json” 循环数组或json
v-show 显示内容
v-else指令：和v-if指令搭配使用，没有对应的值。当v-if的值false，v-else才会被渲染出来
v-if指令：取值为true/false，控制元素是否需要被渲染
v-else-if 必须和v-if连用
v-else指令：和v-if指令搭配使用，没有对应的值。当v-if的值false，v-else才会被渲染出来
v-text 解析文本
v-html 解析html标签
v-bind:class 三种绑定方法 1、对象型 ‘{red:isred}’ 2、三元型 ‘isred?“red”:“blue”’ 3、数组型 ‘[{red:“isred”},{blue:“isblue”}]’
v-once 进入页面时 只渲染一次 不在进行渲染
v-cloak 防止闪烁
v-pre 把标签内部的元素原位输出

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

加载渲染过程： 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
子组件更新过程：父beforeUpdate->子beforeUpdate->子updated->父updated
父组件更新过程：父beforeUpdate->父updated
销毁过程： 父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

vue 中 keep-alive 组件的作用

< keep-alive >是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。
< keep-alive > 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

v-show和v-if指令的共同点和不同点

相同点: v-show 和 v-if 都能控制元素的显示和隐藏。
v-show指令是通过修改元素的display的CSS属性让其显示或者隐藏
v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果

Vue.extend 作用和原理

官方解释：Vue.extend 使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。
其实就是一个子类构造器，是Vue组件的核心api。实现思路就是使用原型继承的方法返回了 vue 的子类，并且利用 mergeOptions 把传入组件

异步同步

同步：向服务器发送请求，必须等请求到内容，才能刷新页面，用户才能看到新内容
异步：向服务器发送请求，这时可以做其他事情，内容请求到时，用户不用刷新页面，也可以看到新内容

Vue.set 方法原理

1.在实例创建之后添加新的属性到实例上（给响应式对象新增属性）
2.直接更改数组下标来修改数组的值。

不用Vuex会带来什么问题？

可维护性会下降，想修改数据要维护三个地方；
可读性会下降，因为一个组件里的数据，根本就看不出来是从哪来的；
增加耦合，大量的上传派发，会让耦合性大大增加，本来Vue用Component就是为了减少耦合，现在这么用，和组件化的初衷相背。