vue相关面试题1-10

1、使用vue的好处

vue是一个渐进式框架，和Angular.js、React.js并称为前端三大主流框架。

那么vue的好处有一下几点：

提高开发效率

能够帮我们减少不必要的BOM操作，提高渲染效率和库的区别

2、MVC和MVVM的区别

MVC是后端的分层设计理念，其中分为：

Model（模型层）

View (视图层)

Controller (调度层）

MVVM是前端的分层设计理念，是根据MVC中的V再次划分的，其中分为：

Model（模型层，用于逻辑处理、存放数据）

View (视图层，用于页面渲染)

ViewModel (调度层，连接M和V的调度层）

3、vue和react有什么不同

他们都是用于构建界面的，都使用了组件化的思想，都是用了虚拟dom

不同的是：react整体是函数式的思想，吧组件设计成纯组件，状态和逻辑通过参数传入，所以react是单向数据流，推崇结合immutable来实现数据不可变。

而vue的思想是响应式的，也就是数据可变的，通过对每一个属性简历Watcher来监听，当属性变化的时候，响应式的更新对应的虚拟dom。

4、vue的双向数据绑定的原理

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

5、render函数的执行时机

vue通常使用Template来创建编写html，但是一些特殊的时候，这种写死的方法无法满足需求，必须需要js的编程能力。此时，需要用render来创建HTML。

render函数在beforemount 和mounted之间，在beforeupdate 和updated之间也会调用。

6、vuex和localStorage的区别

vuex是存放vue组件的全局数据和设置全局状态的地方，而localStorage是本地缓存，除非手动删除否则一直存在，另外sessionStorage也是本地缓存，但是只要页面关闭数据就会清楚。

7、如何解决页面刷新vuex被清空的问题

将vuex中的数据存入缓存中，也就是sessionStorage / locationStorage，或者在页面刷新时重新进行数据的请求在存入vuex。

8、能不能在method中使用剪头函数

理论上是可以，但是我觉得最好是不要用，因为箭头函数中会保留this指向，箭头函数的this指向父级，也就是在哪定义的箭头就指向哪里，这样的话有些需要this的方法就会出现问题，例如this.$store.state。

9、如何定义组件的data

ES5: data：function（）{}    ES6: data（）{}

10、vue的生命周期函数有哪些

beforeCreat（） //创建vue实例之前调用的函数，一般用于页面重定向

created（）//创建完成，一般用于对data的初始化

beforemount（）//页面挂载前，模板渲染好放入内存中但是还没有渲染到页面上，一般也用于页面重定向

mounted（）//页面挂载之后，页面渲染完成，一般以来dom操作的在这里写

beforeUpdata（）页面更新前

updataed（）页面更新后，一些因为dom元素改变而要初始化组件的操作

beforeDestory（）页面销毁之前，例如清楚计时器，解除监听等

destroyed（）页面彻底销毁，生命周期结束