Vue 面试必问题

Vue

简单说说你对Vue的理解？

Vue是一套构建用户界面的渐进式自底向上增量开发的MVVM框架，其核心是关注视图层，为了解决数据绑定问题以及为了开发大型单页面应用和组件化，所以vue的核心思想是数据驱动和组件化。

model—view—view-model

model：后端数据接口、api

view：用户视图 html/css

view-model：数据处理、数据逻辑

view与view-model相互双向绑定 model与view-model相互双向绑定

因此view数据的变化会同步到model中，而model数据的变化也会立即反应到view上。，在开发过程中只需要关注view层即可，不需要手动操作DOM节点，不需要关注数据状态的同步问题。

说一说 Vue循环的key作用？

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

Vue中路由跳转有哪些方法？

标签跳转及参数（router-link）

可以通过this.$router.push()进行路由的跳转

可以使用Parmas+name或者query+path的方式进行跳转

简单叙述一下Vue的生命周期？

在Vue生命周期中，会有8个钩子函数的调用！

beforecreated

created

beformount

mounted DOM渲染完成，可以操作DOM节点

beforeupdate

updated

beforedestroy

detroyed

对vue中keep-alive的理解？

在组建切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间以及性能消耗，提高用户体验。生命周期函数中，在keep-alive组件激活时调用activated，在keep-alive组件停用时调用deactivated。

Vue等单页面应用的优缺点？

优点：

有良好的交互体验

有良好的前后端工作分离模式

减轻服务端的压力

缺点：

seo难度较高

前进、后退管理

初次加载耗时多

Vue中如何去除url中的#？

vue-route中默认为hash模式，所以在路由加载的时候会自带#，如果要去除#，可以通过将vue-route的模式改为history即可！

v-show和v-if 的区别？

v-show的话对应的内容还是会加载出来，只是被隐藏罢了，资源仍会占用

v-if的话会，只有为true时才会加载显示在HTML中。

v-if如何让css只在当前组件中起作用？

只要在本页面的style中加入scoped即可

Vue中常用的几种命令？

v-if：根据表达式的值的真假条件渲染元素

v-for：根据表达式的真假值，切换元素的display CSS属性

v-show：循环指令，基于一个数组或者对象渲染一个列表，必须配合key值使用。

v-bind：动态绑定一个或多个特性，或一个组件prop到表达式。

v-model：实现表单输入金额应用状态之间的双向绑定

v-on：用于监听指定DOM事件，比如点击事件、绑定事件监听器。

Vue中路由守卫有哪些？

全局守卫：beforeEach（to、from、next）和afterEach（to、form）

路由独享守卫：beforeEnter

组件内的守卫：路由进入/更新/离开之前 beforeRouterEnter/update/leave

Vued 的双向数据绑定原理是什么？

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

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

beforeCreate、created、beforeMount、mounted这几个钩子

为什么避免v-if和v-for用在一起？

当他们处在同一节点时，v-for的优先级比v-if更高，这就会导致v-if将分别重复运行在每个v-for的循环当中。

vuex是什么？怎么使用？那种功能场景使用？

vuex是vue中的状态管理，在main.js引入store注入。通常应用在组件之间的状态、音乐播放器、登录状态、加入购物车等

vuex有哪几种属性？

有五种属性，分别是state、getter、mutation、action、module
​
更多详细内容见：了解更多

感谢各位多多支持！

​