vue面试题解答

1.阐述响应式原理

当一个vue实例创建的时候，vue会遍历data选项的属性，用Object.defineProperty将它们转为getter/setter并在内部追踪相关的依赖，在属性被访问和修改时通知变化。

2.如果data选项的属性值是一个数组，Vue时怎么拦截的？

复制一个原生数组，然后用Object.defineProperty拦截该复制数组的每个方法，最后返回这个当前data属性数组的__proto__等于该复制数组，达到监听数组变化的能力。

3.这个内部追踪指的是什么？

内部追踪依赖于Proxy（作用域代理）和渲染函数（做依赖的收集）

4.渲染函数的核心

词法分析、句法分析

5.为什么js禁止用with，vue2.0版本渲染函数还用with?

with的使用主要是因为它消除了对嵌入模板中的JavaScript表达式进行解析和范围分析的需要，从而大大减少了代码原本身的大小和复杂性。由于模板编译器包含在浏览器中运行的独立构建中，负载大小仍然是一个重要的关注点。

完整答案 ： https://github.com/vuejs/vue/issues/4115#issuecomment-258525758

 

——————————————  相关问题——————————————

1.Object.defineProperty和proxy的区别

Object.defineProperty(obj, key, descriptor) 

只能监听对象的属性，无法监听数组的变化，属性值也是对象需要深度遍历

descriptor配置项包含  get, set, configurable, enumerable, value

Proxy 

返回一个新的对象，可通过操作返回的新的对象达到目的

有13种拦截方法：

get, set, has, contruct， deleteProperty, defineproperty, enumerate, getOwnPropertyDescriptor,

getPrototypeof, isExtensible, ownKeys, preventExtensions, setPrototypeOf

 

defineProperty再修改原来的obj对象可以触发拦截；

proxy就必须修改代理对象，即Proxy的实例才可以触发拦截；

2. vue和react的区别

（1）数据是否可变

                react推崇函数式思想，数据不可变，单向数据流；vue推崇响应式思想，数据可变， 支持双向绑定。

（2）语法

               react是JSX语法，all in javascript，通过js生成html，css等；vue把html，css，js组合到一起，提供模板引擎来处理html。

（3）组件写法

               react是类式写法，api少，可以通过高阶组件来扩展；vue是声明式写法，api和参数都很多，需要通过mixins来扩展。

（4）框架类别

              react是一个UI组件库，很多事情交给社区去做，例如redux， mobx，vue是渐进式框架，很多东西都是内置的；

              redux的combineReducer就对应vuex的modules，vuex的mutation是直接改变的原始数据，而redux的reducer是返回一个全新的state,所以redux结合immutable来优化性能，vue不需要。