vue常见的面试题

Vue 网红面试题话术
1、说一下vuex
什么是vuex?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理项目的所有组件的状态

在什么地方用到vuex？
在项目中做 购物车或者 登录时候的token的时候用到的

vuex5大核心
state 组件状态
mutations 操作state中的方法
actions 调用mutations的方法  里面是异步方法
getters 对state中的数据做逻辑处理
modules 对state中的数据分模块
vuex的运行机制
在组件中通过dispatch 调用actions中的方法，在actions中通过commit调用muations中方法，在mutations中可以直接操作state中的数据，只要state中的数据发生改变就会立即响应到组件的视图上

vuex的使用方法
使用挂载到原型上的属性和方法  this.$store上的属性和方法

state ==this.$store.state

mutations this.$store.commit("方法名","参数)

actions  this.$store.dispatch("方法名",参数)

getters  this.$store.getters.**

modules this.$store.模块名.state

可以使用映射函数来将组件中用到的属性和方法来映射过来

vuex持久化
vuex有个缺点就是页面刷新数据丢失，解决办法就是利用插件 vuex-persistate实现数据的持久化

2、你说一下生命周期吧

所谓的vue⽣命周期就是vue实例从创建到销毁的整个过程我们称之为vue的⽣命周期,

通过vue的⽣命周期我们可以在不同的阶段进⾏不同的逻辑操作. vue⽣命周期常⽤的钩⼦函数⼀共有8个,分别是创建前后、挂载前后、
更新前后以及销毁前后. 分别对应的钩⼦函数为beforeCreate 创建前、 created创建后、beforeMount 挂载

前、mounted挂载后、beforeUpdate 更新前、updated更新后、beforeDestory 销毁前、 destoryed销毁后, 

⻚⾯⼀开始加载的时候就会触发创建前后和挂载前后的钩⼦函数, ⽽更新的钩⼦函数需要当我们改变data的时候才能触发,
⽐如 点击按钮,执⾏⼀个⽅法,在这个⽅式⾥⾯给data⾥⾯属性重新进⾏复制操作,这个时候就会更新的钩⼦函数, 
销毁的钩⼦函数必须得当组件进⾏切换的时候就会进⾏销毁. 
在项⽬开发过程中,我经常使⽤到的钩⼦函数有created,我们经常在created进⾏数据请求,或者获取本地存储的数据,还有⼀些其他的操作. 
除了created还有mounted,我们经常在mounted⾥⾯获取dom元素 (有时 候也存在获取不到dom元素的情况,这个时候我们⼀般⽤$nextTick⽅法来解决). 以上就是我对⽣命周期的理解

有父子组件的生命周期函数执行顺序是  ：父beforeCreate->父Created->父beforeMounte->子组件的四个钩子->父组件的mounted

使用kepp-alive会增加两个钩子函数  activated 进入缓存页 deactivated离开缓存页
还有一个错误处理钩子 errorCaptured

3、vue路由有⼏种模式?有什么区别?原理是什么?

vue的路由模式⼀共有两种,分别是哈希和history. 他们的区别是hash模式不会包含在http请求当中,并且hash不会重新加载⻚⾯,
⽽使⽤history模式的话,如果前端的url和后端发起请求的url不⼀致的话,会报404错误,所以使⽤history模块的话我们需要和后端进⾏配合.

history的原理就是利⽤html5新增的两个特性⽅法,分别是psuhState和replaceState来完成的. 
当堆栈的路径发生改变会触发onpopstate()事件来监听路径变化

hash是通过onhashchange()事件来监听hash路径的变化

4、说一下vue的路由导航守卫

⾯试官您好,接下来我给您介绍⼀下vue路由守卫,⾸先呢,所谓的路由守卫就是当我们进⾏⻚⾯跳转的时候会触发的钩⼦函数,我们把它称之为vue路由守卫. 
vue⼀共给我们提供了三种路由守卫,第⼀种全局路由守卫,第⼆种是组件内路由守卫,第三种路由独享守卫,这个是写在路由⾥⾯. 
不管是全局,还是组件以及独享,都会有beforeEach、beforeResolve 、afterEach 分别表示的意

思路由跳转前会触发的钩⼦函数以及进⼊路由的时候,以及进⼊路由之后会触发的钩⼦函数. 这⼏个钩⼦函数⾥⾯都有⼀个回调函数,这个回调函数⾥⾯会有三个参数,
分别是to,from,next,分别对应的是要进⼊的路由、离开之前的路由,以及进⼊写⼀个路由

在项⽬中我们经常使⽤路由守卫实现⻚⾯的鉴权. ⽐如:当⽤户登录之后,我们会把后台返回的token以及⽤户信息保存到vuex和本地,
当⻚⾯进⾏跳转的时候,我们会在路由守卫⾥⾯获取vuex⾥⾯的token,如果token存在的话,我们则使⽤next让他进⼊要跳转的⻚⾯,
如果token不存在的话我们使⽤next⽅法让他回到登录⻚.以上就是我对vue路由守卫的理解

5、vue的组件通信

⽗传⼦ 

在⼦组件的标签上定义属性 ⼦组件通过props来进⾏接受,可以通过数组的⽅式进⾏接受,也可以通过对象的⽅式来进⾏接收,
如果⽗组件没有传递属性,⼦组件可以default来设置默认值

⼦传⽗ 

⼦组件通过this.$emit("⾃定义的事件",要传给⽗组件的数据), ⽗组件通过⼦组件的标签监听⾃定义的时间,通过⽅法来接收传递的数据

⾮⽗⼦组件通信

通过中央事件总线,我们也称之为eventBus,我们需要创建⼀个空的js⽂件,在这个⽂件⾥⾯创建空的vue实例,然后导出这个空的vue实例,通过实例对象调⽤.
on⽅法进⾏接收,通过emit⽅法来进⾏发送,以上就是⾮⽗⼦组件通信的⽅式

6、vue双向绑定的原理 

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

这个时候就可以实现数据的双向绑定

7、什么虚拟dom？

由于在浏览器中操作 DOM 是很昂贵的。频繁的操作 DOM，会产⽣⼀定的性能问题. 所以在vue中将真实的DOM节点抽离成⼀个虚拟的DOM树,
这个虚拟的DOM树就是虚拟DOM.
本质：就是利用js描述元素与元素之间的关系

作用：高效渲染 和快速更新

8、什么是diff算法

就当数据发生改变的时候，新 旧两颗dom数比较用的算法就是diff算法

Vue的dif算法是平级⽐较，不考虑跨级⽐较的情况。内部采⽤深度递归的⽅式+双指针⽅式⽐较

先⽐较两个节点是不是相同节点

相同节点⽐较属性，复⽤⽼节点

先⽐较⼉⼦节点，考虑⽼节点和新节点⼉⼦的情况

优化⽐较：头头、尾尾、头尾、尾头

⽐对查找，进⾏复⽤

9、在使用v-for时为什么会有key

避免dom元素重复渲染. 我⻔⼀般在设置key的时候⾸先尽量会设置为id,或者index下标

10、为什么vue中data必须是⼀个函数

如果data是⼀个函数的话，这样每复⽤⼀次组件，就会返回⼀份新的data，类似于给每个组件实例创建⼀个私有的数据空间，
让各个组件实例维护各⾃的数据。⽽单纯的写成对象形式，就使得所有组件实例共⽤了⼀份data，就会造成⼀个变了全都会变的结果

所以说vue组件的data必须是函数。这都是因为js的特性带来的，跟vue本身设计⽆关。

11、vue中data发⽣变化,视图不更新如何解决?

⾯试官,您好,接下来我先给您介绍⼀下为什么data发⽣变化,视图不更新,因为Vue实例中的数据是响应式的⽽我们新增的属性并不是响应式的，
由于受现在JavaScript的限制，Vue⽆法检测到属性的新增或删除。所以有时⽆法实时的更新到视图上。

所以我在项⽬中遇到这类问题的时候⼀般是通过this. $set方法去解决this.$set⽅法⼀共有三个参数,
分别是⽬前属性,新增属性,新增的值.以上就是我对视图不更新的理解.

12、说一下对keep-alive的理解

keep-alive是vue内置的⼀个组件，⽽这个组件的作⽤就是能够缓存不活动的组件，我们能够知道，⼀般情况下，组件进⾏切换的时候，
默认会进⾏销毁，如果有需求，某个组件切换后不进⾏销毁，⽽是保存之前的状态，⽐如说刚刚填好的表单数据。那么就可以利⽤keep-alive来实现

在搭建 vue 项⽬时，有某些路由组件没必要多次渲染，所以需要将组件在内存中进⾏‘持久化’，此时在router-view上使⽤keep-alive。 keep-alive可以使被包含的路由组件状态维持不变，
即便是组件切换了，其内的状态依旧维持在内存之中。在下⼀次显示时，也不会重新渲染。

keep-alive有三个属性 1.include - 字符串或正则表达式。只有名称匹配的组件会被缓存。 2.exclude - 字符串或正则表达式。
任何名称匹配的组件都不会被缓存。 3.max-数字最多可以缓存多少组件。

使用keep-alive还会增加两个钩子函数  

activated (原因：再次进入到缓存页面mounted就不执行了 缓存的页面接口请求放在activated中)

deactivated(原因：缓存页面离开的时候不会执行beforeDestroy destroyed)

13、v-if和v-show的区别

从效果上来说v-if和v-show都是控制元素的显示与隐藏，然而v-if根据条件创建和删除元素 而v-show是根据条件通过css的dispaly属性显示和隐藏元素。

v-if有更高的切换成本 v-show有更高的渲染成本

14、v-for与v-if的优先级那个⾼?如果同时使⽤v-for和v-if怎么解决?
v-for的优先级⾼. 因为v-for的时候我们才开始渲染dom元素,这个v-if还⽆法进⾏判断.

v-for和v-if不能同时使⽤,我们可以通过标签,⽐如div或者template标签来进⾏包裹,把v-if写到包裹的标签上⾯(写到v-for外⾯)也可以通过计算属性检索符合条件的数据，然后再渲染计算属性

15、methods、computed和watch的区别?
 

1、methods是⽤来定义⽅法的区域,methods定义的⽅法需要调⽤才能触发. 不具备缓存⾏

2、computed是计算属性,他依赖于属性值的变化,当属性发⽣改变的时候,计算属性⾥⾯定义的⽅法就会触发,computed具有缓存性,依赖属性值的变化⽽变化.

3、watch主要是⽤于监听,不具备被缓存性.依赖于数据变化⽽触发.

在项⽬中,⽐如我们获取vuex中state的状态的时候我们会把它放到computed⾥⾯,或者在写购物⻋数量计算的时候也会使⽤计算属性.
watch我们在做购物车列表联动选择的时候可以监听购物车数据，来看是否需要全选
以上就是我对computed和watch的理解

16、$nextTick⽅法有什么作⽤

方法的主要作用就是等待 元素加载完毕之后才会执行的回调函数 我们经常会在

this.$nextTick()⽅法⾥⾯操作dom元素,在todolist的编辑功能中，点击文本出现文本框并且获取焦点的时候用到了$nextTick()函数

17、说⼀下你对slot插槽的理解

插槽就是在子组件中用<slot>标签括起来来的一块区域，用来展示父组件传递的结构。插槽分为匿名插槽 具名插槽和作用域插槽。

匿名插槽也是默认插槽，如果不指定名字所有的数据都会展示在匿名插槽上

具名插槽是我们常用的插槽，可以在父组件中通过v-slot:name来指定数据在哪个明子插槽上展示

作用域插槽使用子组件中的数据可以使用作用域插槽来拿,语法就是通过在子组件标签上的slot绑定一个自定义属性，
然后在父组件中通过v-slot:name="变量"来拿到子组件传递的作用域数据，这个数据仅限于此插槽中

18、说⼀下axios的拦截器的作⽤?应⽤场景都有哪些?

⾸先呢,axios拦截器是axios给我们提供的两个⽅法,请求拦截和响应拦截，通过这两个⽅法我们可以对请求发送之前以及响应之后进⾏逻辑的再次处理(拦截). 

这两个拦截器不需要⼿动触发,只要发送http请求的时候就会⾃动触发请求拦截. 我在项⽬中经常通过拦截器发送token,
 对token进⾏过期处理,以及请求拦截中开启loading在响应数据后关闭loading

19、怎样理解 Vue 的单向数据流

数据总是从⽗组件传到⼦组件，⼦组件没有权利修改⽗组件传过来的数据，只能请求⽗组件对原始数据进⾏修改。
这样会防⽌从⼦组件意外改变⽗级组件的状态，从⽽导致你的应⽤的数据流向难以理解。

注意：在⼦组件直接⽤ v-model 绑定⽗组件传过来的 prop 这样是不规范的写法 开发环境会报警告

如果实在要改变⽗组件的 prop 值 可以再 data ⾥⾯定义⼀个变量 并⽤ prop 的值初始化它 之后⽤$emit 通知⽗组件去修改

20、在子组件中怎么开启prop的数据类型验证，可以验证的数据类型有哪些？

如果需要开启数据类型验证需要prop接受父组件数据的时候使用对象的形式

{default:设置默认值，type:“需要接受数据类型”}，如果类型不一致，就会发出警告。

可以验证的数据类型有：String Number Array  Object Boolean等

21、组件写name有啥好处

1、增加name属性，会在components属性中增加组件本身，实现组件的递归调⽤。/2、可以2、表示组件的具体名称，⽅便调试和查找对应的组件。

3、在使用keep-alive缓存组件时，可以使用includes属性找到组件

22、说⼀下什么是vue过滤器? 有⼏种?项⽬中如何使⽤,请举例说明

所谓的vue过滤器就是将数据进⾏⼆次处理,得到我们想要形式数据

vue的过滤器分为两种,第⼀种是全局过滤器,通过vue.filter来进⾏定义,第⼆种是局部过滤器,需要

在组件内部添加filters属性来定义。

项⽬中我们通过过滤器将后台返回的状态0 和1 转化为⽀付或者未⽀付或者处理时间格式 货币格式等

23、说⼀下什么是mvvm模式

MVVM 是把 MVC 的 Controller 和 MVP 的 Presenter 改成了 ViewModel 。

M 数据模型 V是视图 VM 逻辑处理

View 的变化会⾃动更新到 ViewModel ， ViewModel 的变化也会⾃动同步到 View 上显示。这种⾃动同步是因为 ViewModel 中的属性实现了 Observer ，
当属性变更时都能触发对应的操作

24、vue常⽤的指令有哪些 需要背含义?

v-if

v-show

v-html

v-text

v-on

v-bind

v-model

v-for

25、 vue常⽤的修饰符有哪些

trim 去除⾸尾多余的空格

.stop 阻⽌事件冒泡

.once 只渲染⼀次

.self 事件只作⽤在元素本身

.number 将值转化为number类型

.capter 组件之间捕获

.prevent 阻⽌元素的默认⾏为

.native 事件穿透,让我们可以在⾃定义组件上定义事件和⽅法

26、说⼀下vue和jquery的区别?

⾸先呢jquery他是⽤js封装的⼀个类库,主要是为了⽅便操作dom元素,⽽vue他是⼀个框架,并且呢,他会从真实dom构建出⼀个虚拟的dom树,
通过diff算法渲染只发⽣改变的dom元素,其他的相同的dom元素不⽤在重新渲染. ⽽使⽤jquery去改变dom元素的时候,即使有相同的dom元素也会重新渲染,以上就是我对vue和jquery区别的理解

27、MVVM模式的优点以及与MVC模式的区别

MVVM模式的优点：

1、低耦合： 视图（View）可以独⽴于 Model 变化和修改，⼀个 ViewModel 可以绑定到不同的"View"上，当View变化的时候Model

可以不变，当Model变化的时候View也可以不变。

2、可重⽤性： 你可以把⼀些视图逻辑放在⼀个ViewModel⾥⾯，让很多 view 重⽤这段视图逻辑。

3、独⽴开发： 开发⼈员可以专注于业务逻辑和数据的开发（ViewModel），设计⼈员可以专注于⻚⾯设计。

4、可测试： 界⾯素来是⽐较难于测试的，⽽现在测试可以针对ViewModel来写。

MVVM 和 MVC 的区别：

mvc 和 mvvm 其实区别并不⼤。都是⼀种设计思想。

主要区别

mvc 中 Controller演变成 mvvm 中的 viewModel，

mvvm 通过数据来显示视图层⽽不是节点操作。

mvvm主要解决了:

mvc中⼤量的DOM 操作使⻚⾯渲染性能降低，加载速度变慢，影响⽤户体验。

28、说⼀下如何对axios进⾏⼆次封装?以及api如何封装?

   1、 在src⽂件夹内创建utils⽂件夹

在utils⽂件夹内创建request.js⽂件
在request.js内引⼊axios
使⽤axios.create⽅法创建axios的实例,在axios.create⽅法⾥⾯可以配置请求的公共地址和超时时间以及其他的⼀些配置
在创建请求拦截器和响应拦截器
在请求拦截器⾥⾯可以获取vuex的token,并通过config.header.token = vuex的token,将token发送给后台
在请求拦截器⾥⾯我们配置loading加载
在响应拦截器⾥⾯我们可以结束loading加载以及token的过期处理,以及错误响应信息的处理
最后通过export default 导出axios的实例对象

29、说⼀下vue中本地跨域如何解决?线上跨域如何解决?

本地跨域是通过在vue.config.js⽂件⾥⾯的devServer属性⾥⾯的proxy属性⾥⾯配置,⼀共配置三个属性,分别是代理名称 代理地址 开启跨域 重写路径
线上跨域是在nginx.conf⽂件⾥⾯配置, 代理名称是通过location 代理名称。proxy_pass 代理地址

30、从输入url到敲回车发生了什么？

1. DNS 解析

2. TCP 连接

3. 发送 HTTP 请求

4. 服务器处理请求并返回需要的数据

5. 浏览器解析渲染页面

6. 连接结束

31、http请求状态码

1xx：指示信息--表示请求已接收，继续处理

2xx：成功--表示请求已被成功接收、理解、接受

3xx：重定向--要完成请求必须进行更进一步的操作

4xx：客户端错误--请求有语法错误或请求无法实现

5xx：服务器端错误--服务器未能实现合法的请求

32、说一下vue自定义指令的钩子函数

bind: 只调用一次，指令第一次绑定到元素时调用 可以写元素样式
inserted: 被绑定元素插入父节点时调用 可以操作dom
update: 被绑定元素所在的模板更新时调用
componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
unbind: 只调用一次， 指令与元素解绑时调用。
每个钩子函数都有两个参数 el  binding   el是原生dom对象 binding是当前指令的参数对象