Vue.js相比大家都不陌生，作为近几年来前端框架中最火的一个，已经有非常多的网页前端开始采用Vue.js进行开发。
相比之前，Vue.js很容易上手，简单易学，语法自由，谦虚不需要认识复杂的生命周期函数，父子组件通信更灵活。如今，很多招聘上也都写着需要掌握Vue开发项目，那么，面试都会问些什么呢？下面为大家准备了一些高频面试题，看完一定收获满满~
对于MVVM的理解
MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。
Model 代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。
View 代表UI 组件，它负责将数据模型转化成UI 展现出来。
ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View。
即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心，它是连接view和model的桥梁。
它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。
Vue的生命周期
beforeCreate(创建前)，在数据观测和初始化事件还未开始
created(创建后)，完成数据观测，属性和方法的运算，初始化事件， $el 属性还没有显示出来
beforeMount(载入前)，在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。
mounted(载入后)，在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。
beforeUpdate(更新前)，在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。
updated(更新后)，在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
beforeDestroy(销毁前)，在实例销毁之前调用。实例仍然完全可用。
destroyed(销毁后)，在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
1、什么是vue生命周期？
答：Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。
2、vue生命周期的作用是什么？
答：它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。
3、vue生命周期总共有几个阶段？
答：它可以总共分为8个阶段：创建前/后、载入前/后、更新前/后、销毁前/销毁后。
4、第一次页面加载会触发哪几个钩子？
答：会触发下面这几个beforeCreate、created、beforeMount、mounted 。
5、DOM 渲染在哪个周期中就已经完成？
答：DOM 渲染在 mounted 中就已经完成了。
Vue组件间的参数传递
1、父组件与子组件传值
父组件传给子组件：子组件通过props方法接受数据；
子组件传给父组件：$emit 方法传递参数
2、非父子组件间的数据传递，兄弟组件传值
同级传参或者隔级传参可以用eventBus(事件车)，内部也是发布订阅模式实现的，适合于非常简单的小项目，一般不用(互相帮)中间键思想 :创建一个vue的实例,然后给每个子组件绑定一个方法(触发时候发布eventBus),在 每个子组件做一个订阅的监控,触发绑在created里的方法执行,靠传递参数的不同实现同步数据 (颜色)
vuex是什么？怎么使用？哪种功能场景使用它？
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
只用来读取的状态集中放在store中；改变状态的方式是提交mutations，这是个同步的事物；异步逻辑应该封装在action中。
在main.js引入store，注入。新建了一个目录store，… export 。
场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车
state
Vuex 使用单一状态树,即每个应用将仅仅包含一个store 实例，但单一状态树和模块化并不冲突。
存放的数据状态，不可以直接修改里面的数据。
mutations
mutations定义的方法动态修改Vuex 的 store 中的状态或数据。
getters
类似vue的计算属性，主要用来过滤一些数据。
action
actions可以理解为通过将mutations里面处理数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据。
view 层通过 store.dispath 来分发 action。
const store = new Vuex.Store({ //store实例 state: { count: 0 }, mutations: { increment (state) { state.count++ } }, actions: { increment (context) { context.commit('increment') } }})modules
项目特别复杂的时候，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。
const moduleA = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } }const moduleB = { state: { ... }, mutations: { ... }, actions: { ... } }const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB})如果你不打算开发大型单页应用，使用 Vuex 可能是很复杂的。如果你的应用比较简单，最好不要使用 Vuex。一个简单的 store 模式就足够了。但是，如果你需要构建一个中大型单页应用，你很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。
vue的计算属性
在模板中放入太多的逻辑会让模板过重且难以维护，在需要对数据进行复杂处理，且可能多次使用的情况下，尽量采取计算属性的方式。
好处：
使得数据处理结构清晰；
依赖于数据，数据更新，处理结果自动更新；
计算属性内部this指向vm实例；
在template调用时，直接写计算属性名即可；
常用的是getter方法，获取数据，也可以使用set方法改变数据；
相较于methods，不管依赖的数据变不变，methods都会重新计算，但是依赖数据不变的时候computed从缓存中获取，不会重新计算。
Vue与Angular以及React的区别？
1、与AngularJS的区别
相同点：都支持指令：内置指令和自定义指令；都支持过滤器：内置过滤器和自定义过滤器；都支持双向数据绑定；都不支持低端浏览器。
不同点：AngularJS的学习成本高，比如增加了Dependency Injection特性，而Vue.js本身提供的API都比较简单、直观；在性能上，AngularJS依赖对数据做脏检查，所以Watcher越多越慢；Vue.js使用基于依赖追踪的观察并且使用异步队列更新，所有的数据都是独立触发的。
2、与React的区别
相同点：React采用特殊的JSX语法，Vue.js在组件开发中也推崇编写.vue特殊文件格式，对文件内容都有一些约定，两者都需要编译后使用；中心思想相同：一切都是组件，组件实例之间可以嵌套；都提供合理的钩子函数，可以让开发者定制化地去处理需求；都不内置列数AJAX，Route等功能到核心包，而是以插件的方式加载；在组件开发中都支持mixins的特性。
不同点：React采用的Virtual DOM会对渲染出来的结果做脏检查；Vue.js在模板中提供了指令，过滤器等，可以非常方便，快捷地操作Virtual DOM。
区别可能会随着版本更新有所变化
css只在当前组件起作用？
在style标签中写入scoped即可 例如：
v-if 和 v-show 区别？
v-if按照条件是否渲染，v-show是display的block或none；
$route和$router的区别？
$route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。
而$router是“路由实例”对象包括了路由的跳转方法，钩子函数等。
vue.js的两个核心是什么？
数据驱动、组件系统
vue几种常用的指令？
v-for 、 v-if 、v-bind、v-on、v-show、v-else
vue常用的修饰符？
.prevent: 提交事件不再重载页面；
.stop: 阻止单击事件冒泡；
.self: 当事件发生在该元素本身而不是子元素的时候会触发；
.capture: 事件侦听，事件发生的时候会调用
v-on 可以绑定多个方法吗？
可以
vue中 key 值的作用？
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。
如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
key的作用主要是为了高效的更新虚拟DOM。
作者：沉静地闪光
链接：https://segmentfault.com/a/1190000016344599
关注布卡family，精彩信息敬请期待！
转载文章和图片均来自公开网络，版权归作者本人所有。如有侵权，联系删除。
扫一扫
416
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
