vue前端面试题（每日更新）

1.Vue核心是什么？

数据驱动（视图的内容随着数据的改变而变动）

组建化：可以增加代码的复用性、可维护性、可测试性、提高开发效率、方便重复使用、体现了高内聚低耦合（这个就是为了增加代码的可重用性、移植性）

2.请你简述对Vue的理解

Vue是一套构建用户界面的渐进式的自底向上增量开发的MVVM框架，核心是关注视图层，vue核心是为了解决数据绑定的问题，为了开发大型单页面应用和组件化，所以vue的信息思想是数据驱动和组件化。MVVM思想是 model：模型，view：视图层，vm:是v.m连接的桥梁。当数据层数据修改时，VM会检测到，并通知视图层进行相应修改。

3.简述vue的单向数据流

父级prop的更新会向下流动到子组件，每次父组件发生改变，子组件所有prop会刷新为最新的值

数据从父组件传递给子组件，只能单向绑定，子组件内部不能直接修改父组件传递过来的数据（可以使用data和computed解决）

4.v-text 与 {{}} 与 v-html 的区别

{{}}将数据解析为纯文本，不能显示输出HTML

v-html 可以渲染输出HTML

v-text 将数据解析为纯文本，不能输出真正的HTML。与花括号的区别是：如果网络慢或者JavaScript出错的话，会将 { { } } 直接渲染到页面中。

v-text 指令的作用：操作网页元素的纯文本内容。{{}}是他的另一种写法。

5.v-on 能够绑定多个方法吗？

可以，如果绑定多个事件，可以用键值对的形式 事件类型：事件名

       如果绑定是多个相同事件，直接用逗号分隔就行

代码示例：

<button @click="myclick('one','two','多个事件',$event)">绑定多个相同事件</button>

<button v-on='{click:a,mouseleave:b}'>绑定多个事件</button>

<button @click="a(),b()">绑定多个事件</button>

myclick(msg1,msg2,msg3,event){

        console.log(msg1+msg2+"-----"+msg3);

        console.log(event);

a(){console.log(a);}

b(){console.log(b);}

6.Vue 循环的key 作用

key 值的存在保证了唯一性，Vue在执行时，会对节点进行检查，如果没有key值，那么vue检查到这里有dom节点，就会对内容清空并赋新值，如果有key值存在，那么会对新老节点进行对比，比较两者的key值是否相同，进行调换位置或删除。

7.什么是计算属性

计算属性是用来声明式的描述一个值依赖了其他的值，当它依赖的这个值发生了改变时，就更新DOM

当在模板中把一个数据绑定到一个计算属性上时，vue会在它依赖的任何值导致该计算属性改变时更新DOM

每一个计算属性都包括一个getter 和 setter ，读取时触发 getter, 修改时触发 setter.

8.Vue单页面的优缺点

优点:前后端分离，能够给用户更好的体验，加载的更快，内容改变不需要重新加载整个页面。

缺点

：初次加载时耗长(浏览器一开始就要加载html/css/js,所有页面内容都包括在主界面中),页面复杂的提高，导航不可用。

9.Vuex是什么？怎么使用？在哪种场景下使用

Vuex是一个专门为vue.js 应用程序开发的状态管理模式，通过创建一个集中的数据存储，方便程序中的所有组件进行访问，简单来说Vuex 就是vue 的状态管理工具

Vuex有五个属性 state getters mutation action modules

State：就是数据存放地，对应一般vue 对象的 data.state 里面存放的数据是响应式的，state数据发生改变，这个数据的组件也会发生改变，用this.$store.xxx 调用

Getters 相当于 store 的计算属性，尤其是对state中数据的过度，使用this.$store.getters.xxx调用

10.Vue 跨域的解决方式

浏览器不允许Ajax跨域访问，
1.通过Vue-cli 代理实现前端的跨域访问设置
将请求的路径写进vue.config.js的配置
2.通过设置后端的cors允许跨域，后台更改header
cors是h5新增的，全称是跨域资源共享
CORS跨域设置代码是：response.setHeader(“Access-Control-Allow-Origin”, “*”);

header('Access-Control-Allow-Origin:*');//允许所有来源访问 
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式 

添加该行代码以后再使用Ajax访问就会发现可以跨域访问了
3.使用JQuery提供的jsonp

11.定义路由组件

1.定义路由组件
2.定义路由规则，每个路由应映射一个组件
3.创建router实例，然后传router配置
4.将路由对象挂载到Vue实例上
使用router-link 组件来导航，to属性指定导航地址

12.关于vue 生命周期的面试题总结

1.vue的整个生命周期会有8个钩子函数进行调用
beforeCreate（创建实例）、created（创建完成）、beforeMount（开始创建模版）、mounted（创建完成）、beforeUpdate（开始更新）、updated（更新完成）、beforeDestroy（开始销毁）、destroyed（销毁完成）

2.vue生命周期的作用是什么？
他的生命周期由多个事件钩子组成，让我们在控制整个vue实例的过程时更容易形成更好的逻辑，也给了用户在不同阶段添加自己代码的机会

3.DOM渲染在哪个周期完成？
在mounted周期就已经完成

4.第一次页面加载会触发哪几个钩子？
第一次页面加载时会触发beforeCreate、created、beforeMount、mounted这四个钩子

5.简述每个周期具体适合哪些场景
beforecreate：可以在这加载loading事件，在加载实例时触发
created：初始化完成时的事件写在这里，比如在这结束loading事件，异步请求也适合在这里调用。在这个阶段，data和method都已经被初始化好了，想要操作date数据或者调用methods中的方法最早只能在这。
mounted：挂载元素，获取到DOM节点，它的上个周期中模板在内存已经编译完成，但尚未挂载至页面。这个周期整个vue实例已经初始化完毕，是实现方法、过滤器的最佳阶段
updated：如果对数据进行统一处理，在这里写相应函数
beforeDestroy：可以做一个确认停止事件的确认框

6.created 和mounted 的区别
created：在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
mounted；在模板渲染成html后调用，通常是页面初始化完成后，再对html的DOM节点进行一些需要的操作

7.在beforeCreated中发出请求合适吗？会出现什么问题？

• 在这个周期主要做了三件事：初始化生命周期、初始化事件、初始化渲染
• 主要是自组件继承父组件的一些公有属性，同事初始化一些自己的状态信息，数据方法等组件自身的信息没有设置，所以不合适，但是如果不需要依赖任何数据发起ajax，
• 可以在created、beforeMount、mounted生命周期发出请求，但是如果希望在调用接口后获取dom节点，放到created下不太合适。

8.什么时候用到bedforeDestory？
清除定时器
解绑自定义的DOM事件，比如：window、scroll
接触自定义事件event.$off

9.ajax请求 应放在哪个生命周期？
mounted；js是单线程，ajax异步获取数据
放在mounted之前没有用，只会让逻辑更加混乱

13.vue路由模式 hash 和history ,简单说一下

hash模式url里面永远带着#号，我们在开发当中默认使用这个模式。那么什么时候要用history模式呢？如果用户考虑url的规范那么就需要使用history模式，因为history模式没有#号，这样的url适合推广宣传。当然其功能也有区别，比如我们在开发app的时候有分享页面，那么这个分享出去的页面就是用vue或是react做的，咱们把这个页面分享到第三方的app里，有的app里面url是不允许带有#号的，所以要将#号去除那么就要使用history模式，但是使用history模式还有一个问题就是，在访问二级页面的时候，做刷新操作，会出现404错误，那么就需要和后端人配合让他配置一下apache或是nginx的url重定向，重定向到你的首页路由上就ok啦。

• 使用JavaScript来对history.replaceState() 进行赋值，改变URL的hash 值
  可以使用hashchange事件来监听hash值的变化
• HTML5提供了History API来实现 URL的变化，其中最主要的API有两个： history.pushState()和history.replaceState(),这两个API可以在不进行刷新的情况下，操作浏览器的历史记录。唯一不同的是，前者是新增一个历史记录，后者是直接替换当前的历史记录。

14.路由传参方式 params 和 query的区别？

1.params形式传参
1）使用v-bind绑定to 属性
2）to属性的值是一个json 对象，此对象有两个属性：name属性和params 属性
3）name属性就是要路由的对象，所以在路由规则列表里，每一个路由规则都应用有一个name值
4）params属性就是要传递的参数，也是一个json对象
5）组件接收参数时，使用this.$route.params.参数名 的形式

2.query形式传参
1.to属性的值仍然是一个json对象，但是两个属性变了，一个是path，一个是query
2.path 属性就是路由地址，对应路由规则中的path值
3.query属性就是要传递的参数，也是一个json对象
4.组件接收参数时，使用 this.$route.query.参数名 的形式

3.区别：
1）query方式类似 于get方式，参数会在路由中显示，可以用作刷新后仍然存在的参数，利用路由规则中的path进行跳转
2）params 方式类似于post，参数不会在路由中显示，刷新后参数将不存在，利用路由规则中的name跳转

15.Vue 数据绑定的几种方式

1.单向绑定：双花括号{{}},html内字符串绑定
2.v-bind：html属性绑定
3.v-model：双向绑定
4.一次绑定：v-once 依赖于 v-model

16.Vue 中如何进行动态路由设置？有哪些方式？怎样获取传递过来的数据？

动态路由也可以叫路由传参，动态路由有params和query两种方式传参
query用path传入，params用name传入
query用 this.$route.query.参数名接收参数，params用this.$route.params参数名 接收参数

17.Vue的路由钩子函数/路由守卫有哪些？

全局守卫:beforeEach (to,from,next) 和afterEach(to,from)
路由独享守卫：beforeEnter
组件内的守卫：路由进入/更新/离开之前. beforeRouterEnter（不能使用this关键字）/beforeRouteUpdate /beforeRouteLeave

18.Vue 中指令有哪些？

v-for：循环数组，对象，字符串，数字
v-on：绑定事件监听
v-bind：动态绑定一个或多个属性
v-model：表单控件或者组件上创建双向绑定
v-if v-else. v-else-if ：条件渲染
v-show:根据表达式真假，切换元素的display
v-html:更新元素的innerhtml
v-text:更新元素innertext
v-pre:跳过这个元素和子元素的编译过程
v-clock:这个指令保持在元素上直到关联实例结束编译
v-once：只渲染一次

19.Vue如何定义一个过滤器

过滤器本身就是一个有参数返回值的方法
new Vue({
filters:{
myFunction(value){
return 处理后的数据
}
}
})
使用方法：

{{表达式 ｜ 过滤器}}

20.如何让组件中的css在当前组件生效

在style 中加上scoped

21.Vue中的data为什么是函数？

data是一个函数的时候，每个函数都有自己作用域，即使重名也不会覆盖，每个实例相互独立，不会相互影响。
如果是引用类型（对象），当多个组件共用一个数据源时，一处理数据改变，所有组件数据都会改变，所以要利用函数通过return 返回对象的拷贝（返回一个新数据），让每个实例都有自己的作用域，相互不影响

22.MVVM 和 MVC 区别

1.MVC 模型视图控制器：视图时可以直接访问模型的，所以视图里面会包含模型的信息，MVC关注的是模型不变，所以在MVC里面，模型不依赖视图，但是视图依赖模型
2.MVVM模型：M:模型层 V：视图层 VM：作为试图层和视图层的中间层，检测两边数据变化通知另一边，实现模型层和数据层的双向数据交互，但这两层没有直接联系。
vue 中MVVM体现：
Vue.js的实现方式，对数据（Model）进行劫持，当数据变动时，数据会出发劫持时绑定的方法，对视图进行更新。

23.Vue双向绑定的原理

Vue双向绑定就是：数据变化更新视图，视图变化更新数据。
Vue数据的双向绑定是通过数据劫持和观察者模式来实现的
数据劫持：Object.defineProperty 的目的是：当给属性赋值时，程序可感知到，就可以控制改变属性值
观察者模式：当属性发生改变的时候，使用该数据的地方也发生改变(也叫发布-订阅模式)。
关于上面的内容有看到一个文章写的不错，想详细了解可以看一下
添加链接描述

24对vue 中 keep-alive 的理解

概念：keep-alive是vue 的内置组件，当他动态包裹组件时，会缓存不活动的组件实例，它自身不会渲染成一个DOM 元素，也不会出现在父组件链中
作用：在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验
生命周期函数：Activited 在keep-alive 组件激活时调用，deactivated 在 keep-alive组件停用时调用

25.vue 组件中怎么传值

1.正向：父传子 父组件把要传递的数据绑定在属性上，发送，子组件通过props接受
2.逆向：子传父 子组件通过 this.$emit(自定义事件名，要发送的数据)，父组件通过一个监听事件来接收，然后拿到数据
3.兄弟：events 通过事件车的方式传递数据。中央事件总线(通俗讲就是：eventBus事件车)的实质就是创建一个vue实例，通过一个空的vue实例作为桥梁实现vue组件间的通信
还有另外两种办法，就是vuex，和子传父，父传子

26.计算属性和watch的区别

区别就是computer具有计算属性，当无关数据改变时，不会重新计算，直接使用缓存中的值，当其依赖的值发生改变时，就会更新dom
watch 监听的是data中定义的变量，当该变量变化时，会触发watch中的方法。

27.vue首次加载慢的原因，怎么解决？白屏怎么检测，怎么解决白屏问题？

首次加载慢的原因：第一次加载有很多组件数据都要渲染
解决：1.路由懒加载 component:()=>impor(“路由地址”)
2.ui框架按需加载
3.gzip压缩
解决白屏问题：1.使用v-text,{{}}渲染数据2.加loading3.骨架屏

28.vuex流程

在vue组件里面，通过dispatch来触发action提交修改数据的操作，然后通过actions的commit触发mutation来修改数据，mutation收到commit的请求，就会自动通过mutate来修改state，最后由store触发每一个调用它的组件的更新。

29.vuex 怎么请求异步数据

1.在state中创建变量
2.然后在action中调用封装好的axiox请求，异步接受数据，commit提交给mutation。mutation中改变state中的状态，将从action中获取到的赋值给state

30.vuex 中的action 如何提交给mutation的

action 函数接收一个与store实例具有相同方法和属性的context对象，可以调用context.commit提交一个mutation，或者通过context.state和context.getters获取state和getters

31.VUEX的state的特性是？

state就是数据源的存放地，state里面的数据是响应式的，state中的数据改变，对应这个数据的组件也会发生改变
state通过mapstate把全局的state和getters映射到当前组件的计算属性

32.VUEX的getter的特性是？

getter可以对state进行计算操作，他就是store的计算属性。
getter可以在多个组件之间进行复用，如果一个状态只在一个组件内使用，可以不用getters

33.VUEX的mutation的特性是？

更改vuex store当中修改状态的唯一办法就是提交mutation，可以在回调函数中修改store中的状态

34.VUEX的action的特性是？

action类似于mutation，不同的是action提交的是mutation，不是直接变更状态，可以包含任意异步操作

35.vuex 的优势

优点：解决了非父子组件的通信，降低了ajax的请求次数，有些可以直接从state获取
缺点：刷新浏览器，vuex中的state会重新变为初始状态，解决办法是vuex-along,得配合计算属性和session storage来实现

35.v-for 和 v-if优先级

首先这两个不能用在同一个元素上。v-for比v-if优先，如果每一次都需要遍历整个数组麻将回影响速度，尤其是只需要渲染很小一部分