前端常见面试题八

作者: jw_fc89 | 来源:发表于2019-07-07 22:56 被阅读110次

目录:

Vue中双向数据绑定是如何实现的

详述虚拟DOM中的diff算法

vue提供了几种脚手架模板

常见的几种MVVM的实现方式

1、Vue中双向数据绑定是如何实现的

首先我们为每个vue属性用Object.defineProperty()实现数据劫持,为每个属性分配一个订阅者集合的管理数组dep;然后在编译的时候在该属性的数组dep中添加订阅者,v-model会添加一个订阅者,{{}}也会,v-bind也会,只要用到该属性的指令理论上都会,接着为input会添加监听事件,修改值就会为该属性赋值,触发该属性的set方法,在set方法内通知订阅者数组dep,订阅者数组循环调用各订阅者的update方法更新视图。

附代码: https://www.cnblogs.com/zhenfei-jiang/p/7542900.html

2、详述虚拟DOM中的diff算法

虚拟DOM是在DOM的基础上在内存建立了一个抽象层,对数据和状态所做的任何改动,都会被自动且高效的同步到虚拟DOM,最后再批量同步到DOM中

Vue的核心是双向绑定和虚拟DOM(下文我们简称为vdom)

vdom是树状结构,其节点为vnode,vnode和浏览器DOM中的Node一一对应,通过vnode的elm属性可以访问到对应的Node。

逐个遍历newVdom的节点,找到它在oldVdom中的位置,如果找到了就移动对应的DOM元素,如果没找到说明是新增节点,则新建一个节点插入。遍历完成之后如果oldVdom中还有没处理过的节点,则说明这些节点在newVdom中被删除了,删除它们即可。

(1)、第一部分是一个循环,循环内部是一个分支逻辑,每次循环只会进入其中的一个分支,每次循环会处理一个节点,处理之后将节点标记为已处理(oldVdom和newVdom都要进行标记,如果节点只出现在其中某一个vdom中,则另一个vdom中不需要进行标记),标记的方法有2种,当节点正好在vdom的指针处,移动指针将它排除到未处理列表之外即可,否则就要采用其他方法,Vue的做法是将节点设置为undefined。

(2)、循环结束之后,可能newVdom或者oldVdom中还有未处理的节点,如果是newVdom中有未处理节点,则这些节点是新增节点,做新增处理。如果是oldVdom中有这类节点,则这些是需要删除的节点,相应在DOM树中删除之整个过程是逐步找到更新前后vdom的差异,然后将差异反应到DOM树上(也就是patch),特别要提一下Vue的patch是即时的,并不是打包所有修改最后一起操作DOM(React则是将更新放入队列后集中处理),朋友们会问这样做性能很差吧?实际上现代浏览器对这样的DOM操作做了优化,并无差别。

附代码:https://blog.csdn.net/m6i37jk/article/details/78140159


3、Vue提供了几种脚手架模板

附代码:https://www.jianshu.com/p/d8147230945c



4、常见的几种MVVM的实现方式

1、数据劫持(vue):通过Object.defineProperty()去劫持数据每个属性对应的getter和setter

2、脏值检测(angular):通过特定事件比如input,change,xhr请求等进行脏值检测。

3、发布-订阅模式(backbone):通过发布消息,订阅消息进行数据和视图的绑定监听。

结构图

附代码: https://www.jianshu.com/p/b90baf27501a

相关文章

  • 前端常见面试题八

    目录: Vue中双向数据绑定是如何实现的 详述虚拟DOM中的diff算法 vue提供了几种脚手架模板 常见的几种M...

  • 说说前端的防抖和节流以及最简单的实现

    防抖和节流在前端是很常见的知识点,并且也是常见的面试题。 00 背景 防抖和节流在前端中是应用很常见的,特别是在 ...

  • 前端相关技术点

    1.整理了一份关于前端的一些常见面试题(2017) 我遇到的前端面试题2017 2.用JS获取地址栏的参数(超级简...

  • 前端常见的字符串操作面试题

    前端常见的字符串操作面试题 一、字符串去重 var str = "ahahggagsssjjj"; functio...

  • PHPer 面试指南-扩展阅读资源整理

    前端篇 收集的前端面试题和答案 前端开发面试题 史上最全的web前端面试题汇总及答案 前端工程师手册 HTTP协议...

  • PHPer 面试指南-扩展阅读资源整理

    前端篇 收集的前端面试题和答案 前端开发面试题 史上最全的web前端面试题汇总及答案 前端工程师手册 HTTP协议...

  • 2019-10-11

    前端常见面试题(实战遇到) 1、浏览器内核 2、常用的块元素和内联元素 3、数据类型 * 4、SQL语句 5、前端...

  • 2019-02-27问题(三)

    题目来源:python常见面试题——网络编程和前端部分 题目: 1. AJAX是什么,如何使用AJAX? ...

  • 前端常见面试题(八)@郝晨光

    ES5/ES6 的继承除了写法以外还有什么区别? ES5寄生组合式继承(只是列举一个方法,ES5继承还有很多实现方...

  • 前端常见面试题目录整理@郝晨光

    前言 由于最近在整理前端常见面试题,整理的文章标题可能有些乱,导致后期不好查找,特此总结目录,目录会与面试题同步更...

网友评论

    本文标题:前端常见面试题八

    本文链接:https://www.haomeiwen.com/subject/ktfwhctx.html