Vue作为前端目前最受欢迎的框架，成为了众多公司和程序员的技术首选。我最近可能也要准备面试了，所以找了一些资料整合一下
谈一下你对MVVM原理的理解
- M - Model，Model 代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑
- V - View，View 代表 UI 组件，它负责将数据模型转化为 UI 展现出来
- VM - ViewModel，ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步 View 和
Model 的对象，连接 Model 和 View、
【重点】：一定要理解Vue的MVVM原理，面试必问！
请说一下响应式数据的原理
采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter
默认Vue在初始化数据时，会给data中的属性使用Object.defineProperty重新定义所有属性，当页面到对应属性时，会进行依赖收集(收集当前组件中的watcher)如果属性发生变化会通知相关依赖进行更新操作
为什么Vue采用异步渲染
因为如果不采用异步更新，那么每次更新数据都会对当前租金按进行重新渲染，所以为了性能考虑，Vue会在本轮数据更新后，再去异步更新数据
Vue优点
- 轻量级框架 只关注视图层,是一个构建数据的视图集合,大小只有几十kb Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统
- 简单易学 国人开发,中文文档,不存在语言障碍,易于理解和学习
- 双向数据绑定 通过MVVM思想实现数据的双向绑定，让开发者不用再操作dom对象，有更多的时间去思考业务逻辑
- 组件化
Vue.js通过组件，把一个单页应用中的各种模块拆分到一个一个单独的组件（component）中，我们只要先在父级应用中写好各种组件标签（占坑），并且在组件标签中写好要传入组件的参数（就像给函数传入参数一样，这个参数叫做组件的属性），然后再分别写好各种组件的实现（填坑），然后整个应用就算做完了 - 虚拟DOM
把最终的DOM操作计算出来并优化，由于这个DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM。最后在计算完毕才真正将DOM操作提交，将DOM操作变化反映到DOM树上 - 视图,数据,结构分离 使数据的更改更为简单,不需要进行逻辑代码的修改,只需要操作数据就能完成相关操作
- 运行速度更快 像比较与react而言,同样都是操作虚拟dom,就性能而言,vue存在很大的优势
Proxy与Object.defineProperty()的对比
Proxy的优点：
- 可以直接监听对象而非属性,并返回一个新对象
- 可以直接监听数值的变化
- 可以劫持整个对象，并返回一个新对象
Proxy的缺点：
- Proxy是es6提供的新特性，兼容性不好，所以导致Vue3一致没有正式发布让开发者使用
Object.defineProperty的优点：
- 兼容性好，支持IE9
- IE9以下的版本不兼容
Object.defineProperty的缺点：
- 无法监控到数组下标的变化，导致直接通过数组的下标给数组设置值，不能实时响应
- 只能劫持对象的属性，我们需要对每个对象的每个属性进行遍历
如何比较React和Vue
监听数据变化的实现原理不同
- Vue通过getter/setter以及一些函数，能精确知道数据变化
- React默认是通过比较引用的方式(diff)进行的，React不精确监听数据变化
数据流不同：
- Vue2.0可以通过props实现双向绑定，用vuex单向数据流的状态管理框架
- React不支持双向绑定，提倡单项数据流，Redux单向数据流的状态管理框架
组件通信的区别：
- Vue三种组件通信方法： 父组件通过props向子组件传递数据或回调 子组件通过事件event向父组件发送数据或回调
通过provide/inject实现父组件向子组件传入数据，可跨层级 - React三种组件通信方法： 父组件通过props向子组件传递数据 React不支持子组件像父组件发送数据，而使用的是回调函数 通过
context实现父组件向子组件传入数据， 可跨层级
模板渲染方式不同：
- 表面上来看： React通过JSX渲染模板 Vue通过HTML进行渲染
- 深层上来看： React是通过原生JS实现模板中常见语法,如：插件，条件，循环
Vue是与组件JS分离的单独模板，通过指令实现，如：v-if
模板中使用的数据：
- React里模板中使用的数据可以直接import的组件在render中调用
- Vue里模板中使用的数据必须要在this上进行中转，还要import一个组件，还要在components中声明
渲染过程不同：
- Vue不需要渲染整个组件树
- React状态改变时，全部子组件重新渲染
框架本质不同：
- Vue本质是MVVM框架，由MVC发展而来
- React是前端组件化框架，由后端组件化发展而来
Vuex和Redux的区别：
- Vuex可以使用dispatch、commit提交更新
- Redux只能用dispatch提交更新
组合不同功能方式不同：
- Vue组合不同功能方式是通过mixin，可以帮我定义的模板进行编译、声明的props接收到数据….
- React组合不同功能方式是通过HoC(高阶组件)，本质是高阶函数
Vue中相同逻辑如何抽离
Vue.mixin用法给组件每个生命周期，函数等都混入一些公共逻辑
nextTick实现原理
nextTick方法主要是使用了宏任务和微任务，定义一个异步方法，多次调用nextTick会将方法存在队列中，通过这个异步方法清空当前队列。所以这个nextTick方法就是异步方法
diff算法的时间复杂度
两个数的完全的diff算法是一个时间复杂度为o(n3)， Vue进行了优化O(n3)复杂度的问题转换成O(n)复杂度的问题(只比较同级不考虑跨级问题)在前端当中，你很少会跨级层级地移动Dom元素，所以Virtual Dom只会对同一个层级地元素进行对比
简述Vue中diff算法原理
- 先同级比较，在比较子节点
- 先判断一方有儿子一方没儿子的情况
- 比较都有儿子的情况
- 递归比较子节点
Vue中v-if和v-show的区别
- v-show是css切换，v-if是完整的销毁和重新创建
- 使用 频繁切换时用v-show，运行时较少改变时用v-if
- v-if=‘false’ v-if是条件渲染，当false的时候不会渲染
Vue每个生命周期什么时候被调用
- beforeCreate在实例初始化之后，数据观测(data observer)之前被调用
- created实例已经创建完成之后被调用，在这一步，完成已完成以下的配置：数据观测(data
observer)，属性和方法的运算，watch/event事件回调，这里没有$el - beforeMount在挂载开始之前被调用：相关的render函数首次被调用
- mounted el被创建的vm.$el替换，并挂载到实例上去之后调用该钩子
- beforeUpdate数据更新时调用，发生虚拟DOM重新渲染和补丁之前
- updated由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后调用该钩子
- beforeDestory实例销毁之前调用，在这一步，实例仍然完全可用
- destroyedVue实例销毁后调用，调用后，Vu实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用
因为文章篇幅有限，更多后续内容扫描下方二维码，关注微信公众号，第一时间更新！
