每天一道vue面试题

你知道Vue响应式数据原理吗? Proxy与Object.defineProperty优劣对比?

• 响应式原理
  • vue的响应式实现主要是利用了Object.defineProperty的方法里面的setter与getter方法的观察者模式来实现。在逐渐初始化时会给每一个data属性注册getter与setter,然后再new一个自己的Watcher 对象，此时 watcher 会立即调用组件的 render 函数去生成虚拟 DOM。在调用 render 的时候，就会需要用到 data 的属性值，此时会触发 getter 函数，将当前的 Watcher 函数注册进 sub 里。当 data 属性发生改变之后，就会遍历 sub 里所有的 watcher 对象，通知它们去重新渲染组件。
• proxy的优势如下:
  • Proxy 可以直接监听对象而非属性，可以直接监听数组的变化；
  • Proxy 有多达 13 种拦截方法,不限于 apply. ownKeys. deleteProperty. has 等等是 Object.defineProperty 不具备的；
  • Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改；
• Object.defineProperty 的优势如下:
  • 兼容性好，支持 IE9，而 Proxy 的存在浏览器兼容性问题,而且无法用 polyfill(垫片)来弥

解释单向数据流和双向数据绑定

• 对于 Vue 来说，组件之间的数据传递具有单向数据流这样的特性称为单向数据流，单向数据流（Unidirectional data flow）方式使用一个上传数据流和一个下传数据流进行双向数据通信，两个数据流之间相互独立，单向数据流指只能从一个方向来修改状态。
• 而双向数据绑定即为当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化，两个数据流之间互为影响。

对比 jQuery，Vue 有什么不同

• jQuery 专注视图层，通过直接操作 DOM 去实现页面的一些逻辑渲染；

• Vue 专注于数据层，通过数据的双向绑定，最终表现在 DOM 层面，减少了 DOM 操作。Vue 使用了组件化思想，使得项目子集职责清晰，提高了开发效率，方便重复利用，便于协同开发