我又来了,这是Vue面试三板斧的最后一招,当然也是极其简单了,先说Virtual Dom,来一句概念: 用js来模拟DOM中的节点.传说中的虚拟DOM. 再来一张图: 是不是一下子秒懂  没懂再来一张 Virtual Dom就先这样,理解了就OK,下面我们了解一下Diff,老规矩先来一句概念: diff算法就是进行虚拟节点对比,并返回一个patch对象,用来存储两个节点不同的地方,最后用patch记录的消息去局部更新Dom. 换句人话 diff的过程就是调用名为patch的函数,比较新旧节点,一…

最近准备面试,临时抱佛脚的来回顾一下vue相关的面试题,当然这是不对的,平时还是要努力呀,走起: 1.创建vue实例,Vue(); 2.在创建Vue实例的时候,执行了init(),在init过程中首先调用了beforeCreate钩子函数: 3.同时监听data数据,初始化vue内部事件,进行属性和方法的计算: 4.以上都干完了,调用Created钩子函数: 5.模板编译,把data对象里面的数据和vue语法写的模板编译成HTML.编译过程分三种情况:1)实例内部有template属性,直接调用…

我又来吹牛逼了,这次我们简单说一下vue的数据双向绑定,我们这次不背题,而是要你理解这个流程,保证读完就懂,逢人能讲,面试必过,如果没做到,请再来看一遍,走起: 介绍双向数据之前,我们先解释几个名词: 1.什么是setter.getter ? 答:首先,别误以为他们就是一会要说的get.set,我们先看一句定义: 对象有两种属性:(1)数据属性,就是我们经常使用的属性(2)访问器属性,也称存取器属性(存取器属性就是一组获取和设置值的函数) 再看一行代码: log打印出来的如下: 数据属性就是a和…

一.React生命周期 一个组件从出生到消亡,在各个阶段React提供给我们调用的接口,就是生命周期. 生命周期这个东西,必须有项目,才知道他们干嘛的. 1.1 Mouting阶段[装载过程] 这个阶段在组件上树的时候发生,依次是: constructor(props) 构造函数 作用:初始化state值,此时可访问props.发Ajax请求 componentWillMount() 组件将要上树 作用:常用于根组件中的引用程序配置,不能做任何涉及DOM的事情完成一些计算工作 render()…

virtual DOM : virtual DOM 用 js 模拟 DOM 结构,用 js 来对比前后变化,提高重绘性能. diff: 比如在 git 中,如果用命令  git diff xxx文件 再比如在 Linux 中 diff 两个文件比较不同之处 diff 用了 createElement 和 updataChildren,对节点进行增删.重新排序.对节点/样式/事件进行绑定,等 参考文章:https://www.imooc.com/article/44104…

vue的虚拟dom和diff算法 1.虚拟dom 虚拟dom,我的理解就是通过js对象的方式来具体化每一个节点,把dom树上面的每个节点都变为对象里的一个元素,元素的子元素变为子节点,节点上面的class.id.attribute等属性变为data内的值,然后通过dom上面的createElement.appendChild.insertBefore等方法进行生成dom树. let VNode = { sel:'div', data:{ key:0, props:{}, attrs:{}, cl…

为什么react这么快呢 ? 因为react用了虚拟DOM: 但是每次虚拟DOM转真实DOM不也是很浪费性能吗 ? nice,所以关键点在Diff算法这里,去对比新旧DOM树,而后通过补丁去更新到真实DOM上: 这个比对不是也很浪费时间吗 ? 正常情况下,比较两个树形结构差异的算法的时间复杂度是O(N^3),这个效率显然是无法接受的. react通过总结DOM的实际使用场景提出了两个在绝大多数实践场景下都成立的假设,基于这两个假设,React实现了在O(N)时间复杂度内完成两棵虚拟DOM树的比较…

一.前言 网上都说操作真实dom怎么怎么慢,这儿有个例子:http://chrisharrington.github.io/demos/performance/,例子循环2000个随机数组,点击按钮重新生成随机数组渲染页面,也是自己用的js 操作dom 比用react 和angular 都要快.这是引用知乎上的一个问题.觉得写的很好.文章内容主要是来源于尤大大的回答. 二.原生dom操作VS通过框架封装操作 这是一个性能 vs. 可维护性的取舍.框架的意义在于为你掩盖底层的 DOM 操作,让你用…

vue在官方文档中提到与react的渲染性能对比中,因为其使用了snabbdom而有更优异的性能. JavaScript 开销直接与求算必要 DOM 操作的机制相关.尽管 Vue 和 React 都使用了 Virtual Dom 实现这一点,但 Vue 的 Virtual Dom 实现(复刻自 snabbdom)是更加轻量化的,因此也就比 React 的实现更高效. 看到火到不行的国产前端框架vue也在用别人的 Virtual Dom开源方案,是不是很好奇snabbdom有何强大之处呢?不过正式…

Virual DOM是用JS对象记录一个dom节点的副本,当dom发生更改时候,先用虚拟dom进行diff,算出最小差异,然后再修改真实dom. vue的virtual dom的diff算法是基于snabbdom算法改造而来,与react的diff算法一样仅在同级的vnode间做diff,递归的进行同级vnode的diff,最终实现整个DOM树的更新. 虚拟DOM的缺点: 1. 代码更多,体积更大 2. 内存占用增大 3. 小量的单一的dom修改使用虚拟dom成本反而更高,不如直接修改真实dom…