上周谈到「前端面试CSS总结篇」，今天带来程序员前端面试中同样不可忽视的「Vue」篇。近年来，Vue凭借语法精炼、代码的可读性高、成熟的组件模块化等优势在众多的前端框架中脱颖而出，成为前端工程师面试和技术学习中必须要攻克的难题。恰逢Vue3.0完整版发布，本篇推文中还增加了部分Vue3.0的基础理论及面试题目。

Pate One · 基础篇

1、简述Vue的响应式原理

当一个Vue 实例创建时，Vue会遍历data选项的属性,用Object.defineProperty将它们转为getter/setter 并且在内部追踪相关依赖，在属性被访问和修改时通知变化。每个组件实例都有相应的 watcher 程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。

2、Vue中如何监控某个属性值的变化？

举例：监控 data 中, obj.a 的变化。

Vue 中监控对象属性的变化可以这样

利用计算属性的特性来实现，当依赖改变时，便会重新计算一个新值。

3、虚拟 DOM 方案相对原生 DOM 操作有什么优点，实现上是什么原理？

虚拟 DOM 可提升性能, 无须整体重新渲染, 而是局部刷新。实现原理为 JS 对象, diff 算法。

4、vue 和 jQuery 的区别

jQuery是使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。

Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，数据和View是分离的。

5、谈谈你对 MVVM 开发模式的理解（VUE）

MVVM 分为 Model、View、ViewModel 三者。

Model：代表数据模型，数据和业务逻辑都在 Model 层中定义

View：代表 UI 视图，负责数据的展示

ViewModel：负责监听 Model 中数据的改变并且控制视图的更新，处理用户 交互操作

Model 和 View 并无直接关联，而是通过 ViewModel 来进行联系的，Model 和 ViewModel 之间有着双向数据绑定的联系。因此当 Model 中的数据改变时会触发 View 层的刷新，View 中由于用户交互操作而改变的数据也会在 Model 中同步。

Pate Two · 提高篇

1、自定义指令（v-check、v-focus）的方法有哪些？它有哪些钩子函数？还有哪些钩子函数参数？

全局定义指令：在vue对象的directive方法里面有两个参数，一个是指令名称，另外一个是函数。组件内定义指令：directives

钩子函数：bind（绑定事件触发）、inserted(节点插入的时候触发)、update（组件内相关更新）

钩子函数参数：el、binding

2、写 React/Vue 项目时为什么要在组件中写 key，其作用是什么？

key 的作用是为了在 diff 算法执行时更快的找到对应的节点，提高 diff 速度。vue 和 react 都是采用 diff 算法来对比新旧虚拟节点，从而更新节点。

3、v-if 和 v-show 有什么区别？

v-show 仅仅控制元素的显示方式，将 display 属性在 block 和 none 来回 46切换；而 v-if 会控制这个 DOM 节点的存在与否。当我们需要经常切换某个元素的显示/隐藏时，使用 v-show 会更加节省性能上的开销；当只需要一次显示或隐藏时，使用 v-if 更加合理。

4、vue中子组件调用父组件的方法

第一种方法是直接在子组件中通过this.$parent.event来调用父组件

第二种方法是在子组件里用$emit向父组件触发一个事件，父组件监听这个事件

第三种都可以实现子组件调用父组件的方法。

5、computed和watch有什么区别

 computed

computed是计算属性，也就是计算值，它更多用于计算值的场景

computed具有缓存性，computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时重新调用对应的getter来计算

computed适用于计算比较消耗性能的计算场景

 watch

watch更多的是观察的作用，类似于某些数据的监听回调，用于观察props $emit或者本组件的值，当数据变化时来执行回调进行后续操作

无缓存性，页面重新渲染时值不变化也会执行

Pate Three · Vue3.0

1、为什么Vue3.x改用Proxy替代Object.defineProperty？

因为Proxy可以直接监听对象和数组的变化，并且有多达13种拦截方法。并且作为新标准将受到浏览器厂商重点持续的性能优化。

2、Proxy只会代理对象的第一层，Vue3是怎样处理这个问题的呢？

判断当前Reflect.get的返回值是否为Object，如果是则再通过reactive方法做代理， 这样就实现了深度观测。

3、监测数组的时候可能触发多次get/set，那么如何防止触发多次呢？

我们可以判断key是否为当前被代理对象target自身属性，也可以判断旧值与新值是否相等，只有满足以上两个条件之一时，才有可能执行trigger。

4、Proxy 与 Object.defineProperty 优势对比

Proxy 的优势

Proxy 可以直接监听对象而非属性

Proxy 可以直接监听数组的变化

Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具备的

Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改

Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利

Object.defineProperty 的优势

兼容性好，支持 IE9，而 Proxy 的存在浏览器兼容性问题,而且无法用 polyfill 磨平，因此 Vue 的作者才声明需要等到下个大版本( 3.0 )才能用 Proxy 重写