成都网站建设设计

将想法与焦点和您一起共享

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

 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 )。


文章名称:VUE的面试题分享-好程序员
标题URL:http://chengdu.cdxwcx.cn/article/gsjdde.html