Vue面试题整理

一.什么是MVVM？

MVVM是Model-View-ViewModel的缩写，其中Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View代表UI组件，负责将数据模型转换为UI展现出来，ViewModel是一个同步View和Model的对象。

在MVVM架构下，View和Model之间没有直接联系，而是通过ViewModel进行交互。ViewModel通过双向数据绑定把View和Model层连接了起来，而View和Model之间的同步工作完全是自动的。开发者只需要关注业务逻辑，不需要关注数据状态的同步问题，复杂的数据状态维护完全由MVVM来同一管理。

二.MVVM和MVC区别？哪些场景适合？

MVVM和MVC区别不大，都是一种设计思想。
区别：
1.MVC中Controller变成了MVVM中的ViewModel，MVVM主要解决了MVC中大量的DOM操作使页面渲染性能降低，加载速度变慢，影响用户体验的问题。
2.vue是数据驱动的，通过数据来显示视图层而不是节点操作。

三.vue的优点是什么？

1.遵循MVVM模式
2.双向的数据绑定
3.本身只支持UI，可以轻松引入vue插件或其他第三方库。

扩展1.vue是什么？

Vue是一个渐进式的javascript开发框架，通过组件的开发，最后进行组件的组合，合并组件形成页面。

扩展2.Vue与其他框架对比?

1.与Angular.js区别？

相同点

1.都支持指令：内置指令和自定义指令
2.都支持过滤器：内置过滤器和自定义过滤器
3.都支持双向数据绑定

不同点

1.AngularJS学习成本高，比如增加了Dependency Injection特性，而Vue.js本身的API都比较简单、直观。
2.性能上，AngularJS依赖对数据的脏检查，所以watcher越多越慢。Vue.js使用基于依赖追踪的观察并使用异步队列更新，所有数据都是独立更新的。

小注-脏检查

一种不关心如何以及何时改变的数据，只关心在特定的检查阶段数据是否改变的数据监听技术。

2.与React区别？

相同点

1.React使用特殊的JSX语法，Vue也推崇使用.vue编写，都需要编译后使用
2.都是组件化的开发思想，组件实例可以嵌套
3.都提供合理的钩子函数，可以让开发者定制化的处理需求
4.不内置功能核心包，而是以插件的方式加载
5.在组件开发中都支持mixins特性

不同点

1.React依赖于虚拟DOM，而Vue使用的DOM模板。React的虚拟DOM会作出脏检查。
2.Vue提供了指令、过滤器等，可以非常方便，快捷的操作DOM
3.vue虚拟dom和react虚拟dom不同

扩展3-vue虚拟dom和react虚拟dom有什么不同？

vue会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。
而对于React而言，每当应用的状态被改变，全部组件都会重新渲染，所以react中会需要shouldComponentUpdate这个声明周期函数方法来进行控制。

四.组件之间传值？参考3

1.父组件向子组件传值（props）

采用的主要方法：props，即动态绑定属性，在子组件标签上绑定属性，然后在子组件中用props接收。

2.自组件向父组件传值（通过事件($emit)形式）

在子组件标签上绑定事件，在子组件中使用this.$emit来触发执行函数，并且可以传递参数，函数在父组件中执行后就可以得到传过来的参数。

3.兄弟组件、跨级之间传值（中央事件总线）

通过新建Vue实例（Bus）作为中央事件总线，需要传递数据的组件可以通过bus.$emit将数据传输给Bus，需要接收数据的组件可以通过bus.$on来接收传给Bus的数据。

4.其他方法–ref

ref绑定在组件上，可以通过this.refs拿到组件对象，ref绑定在dom节点上，通过this.refs拿到的是原生dom节点。但这种方式过于暴力，所有组件都可以随意修改拿到的数据，所以不推荐使用。

Vuex

1.Vuex是什么？怎么使用？哪种功能场景使用它？

vuex是一个专门为vue.js应用程序开发的状态管理模式。
使用：在store下新建index.js文件，在main.js中引入。
场景：单页面应用中，组件之间的状态管理，比如音乐播放，登录状态，加入购物车等。

import store from './store'

new Vue({
el:'#app',
store
})

2.vuex有哪几种属性？

五种，分别为state，getter，mutation，action ，module
state ：存放状态，实质上就是一些变量。
getters：getters就是state的计算属性。
mutation：用于更改state中状态的逻辑，更改vuex中state的唯一方法就是，提交mutation，即store.commit(‘xxx’) (只能是同步操作)
action：可以异步操作，在action中提交mutation，在组件的methods中使用dispatch去提交action。
module:将store模块化