ITPub博客

首页 > 应用开发 > Html/css > VUE的面试题分享-好程序员

VUE的面试题分享-好程序员

原创 Html/css 作者:好程序员 时间:2020-08-05 14:38:15 0 删除 编辑

  VUE 的面试题 分享- 好程序员, 现在前端面试中会有很多VUE 的面试题, Vue 框架部分小编整理了几个频率比较高的面试题,希望可以帮助到正在面试的你,没准下次的面试里就会出现这个题目哦, web 前端面试中关于 VUE 的面试题(含答案)

   1 MVC MVP MVVM 的理解

   MVC 模式的意思是,软件可以分成三个部分。

   视图(View ):用户界面。

   控制器(Controller ):业务逻辑。

   模型(Model ):数据保存。

   各部分之间的通信方式如下。View 传送指令到 Controller Controller 完成业务逻辑后,要求 Model 改变状态, Model 将新的数据发送到 View ,用户得到反馈,所有通信都是单向的(逆时针)。

   MVP 模式将 Controller 改名为 Presenter ,同时改变了通信方向。各部分之间的通信,都是双向的(顺时针)。 View Model 不发生联系,都通过 Presenter 传递。 View 非常薄,不部署任何业务逻辑,称为 " 被动视图 " Passive View ),即没有任何主动性,而 Presenter 非常厚,所有逻辑都部署在那里。 MVVM 模式将 Presenter 改名为 ViewModel ,基本上与 MVP 模式完全一致。唯一的区别是,它采用双向绑定( data-binding ): View 的变动,自动反映在 ViewModel ,反之亦然。 Angular Ember 都采用这种模式。

   2 如何理解 Vue 是异步执行 DOM 更新的 ?

   Vue 是异步执行 DOM 更新。只要观察到数据变化, Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发,只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。然后,在下一个的事件循环 tick 中, Vue 刷新队列并执行实际 ( 已去重的 ) 工作。 Vue 在内部尝试对异步队列使用原生的 Promise.then MessageChannel ,如果执行环境不支持,会采用 setTimeout(fn, 0) 代替。例如,当你设置 vm.someData = 'new value' ,该组件不会立即重新渲染。

   当刷新队列时,组件会在事件循环队列清空时的下一个 tick 更新。多数情况我们不需要关心这个过程,但是如果你想在 DOM 状态更新后做点什么,这就可能会有些棘手。虽然 Vue.js 通常鼓励开发人员沿着 “数据驱动” 的方式思考,避免直接接触 DOM ,但是有时我们确实要这么做。为了在数据变化之后等待 Vue 完成更新 DOM ,可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。

   3 深入响应式原理之如何追踪变化

   当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项, Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转 getter/setter

   Object.defineProperty ES5 中一个无法 shim 的特性,这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器的原因。这些 getter/setter 对用户来说是不可见的,但是在内部它们让 Vue 追踪依赖,在属性被访问和修改时通知变化。这里需要注意的问题是浏览器控制台在打印数据对象时 getter/setter 的格式化并不同,所以你可能需要安装 vue-devtools 来获取更加友好的检查接口。

   每个组件实例都有相应的 watcher 实例对象,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的 setter 被调用时,会通知 watcher 重新计算,从而致使它关联的组件得以更新。观察者订阅了可观察对象,当可观察对象发布事件,则就直接调度观察者的行为,所以这里观察者和可观察对象其实就产生了一个依赖的关系。

   4 说下对 Virtual DOM 算法的理解 ?

   包括几个步骤:

   1 、用 JavaScript 对象结构表示 DOM 树的结构,然后用这个树构建一个真正的 DOM 树,插到文档当中;

   2 、当状态变更的时候,重新构造一棵新的对象树,然后用新的树和旧的树进行比较,记录两棵树差异;

   3 、把 2 所记录的差异应用到步骤 1 所构建的真正的 DOM 树上,视图就更新了。 Virtual DOM 本质上就是在 JS DOM 之间做了一个缓存。可以类比 CPU 和硬盘,既然硬盘这么慢,我们就在它们之间加个缓存:既然 DOM 这么慢,我们就在它们 JS DOM 之间加个缓存。 CPU JS )只操作内存( Virtual DOM ),最后的时候再把变更写入硬盘( DOM )。


来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/69913864/viewspace-2709425/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2019-03-20

  • 博文量
    271
  • 访问量
    114405