JS每日一题:Vue中的diff算法？

Caicloud 发布于2019-08-23 15:32 / 2151人阅读

摘要：，文本节点的比较，需要修改，则会调用。，新节点没有子节点，老节点有子节点，直接删除老节点。所以一句话，的作用主要是为了高效的更新虚拟。

20190125

Vue中的diff算法？

概念: diff算法是一种优化手段，将前后两个模块进行差异对比，修补(更新)差异的过程叫做patch(打补丁)

为什么vue,react这些框架中都会有diff算法呢? 我们都知道渲染真实dom的开销是很大的，这个跟性能优化中的重绘重排意义类似, 回到正题来, 有时候我们修改了页面中的某个数据，如果直接渲染到真实DOM中会引起整棵数的重绘重排, 那么我们能不能只让我们修改的数据映射到真实DOM, 做一个最少化重绘重排呢，说到这里你应该对为什么使用diff算法有一个简单的概念了

virtual DOM和真实DOM的区别

一句话概括吧，virtual DOM是将真实的DOM的数据抽取出来，以对象的形式模拟树形结构, diff 算法比较的也是virtual DOM

代码理解


    JS每日一题


// 转换成VNode 类似于下面这种

const Vnode = {
    tag: "div",
    children: [
        { tag: "p", text: "JS每日一题" }
    ]
};

diff 是如何比较的?

源码太多了，就不贴了， 有兴趣的可以自己看看  https://github.com/vuejs/vue/...

简单的说就是新旧虚拟dom 的比较，如果有差异就以新的为准，然后再插入的真实的dom中，重新渲染

特点

只会做同级比较，不做跨级比较

比较后几种情况

if (oldVnode === vnode)，他们的引用一致，可以认为没有变化。

if(oldVnode.text !== null && vnode.text !== null && oldVnode.text !== vnode.text)，文本节点的比较，需要修改，则会调用Node.textContent = vnode.text。

if( oldCh && ch && oldCh !== ch ), 两个节点都有子节点，而且它们不一样，这样我们会调用updateChildren函数比较子节点，这是diff的核心

else if (ch)，只有新的节点有子节点，调用createEle(vnode)，vnode.el已经引用了老的dom节点，createEle函数会在老dom节点上添加子节点。

else if (oldCh)，新节点没有子节点，老节点有子节点，直接删除老节点。

key的作用

设置key和不设置key的区别：
不设key，newCh和oldCh只会进行头尾两端的相互比较，设key后，除了头尾两端的比较外，还会从用key生成的对象oldKeyToIdx中查找匹配的节点，所以为节点设置key可以更高效的利用dom

如我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的：

即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很没有效率？

所以我们需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。

所以一句话，key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果

总结

尽量不要跨层级的修改dom

在开发组件时，保持稳定的 DOM 结构会有助于性能的提升

设置key可以让diff更高效

关于JS每日一题

JS每日一题可以看成是一个语音答题社区
每天利用碎片时间采用60秒内的语音形式来完成当天的考题
群主在次日0点推送当天的参考答案

注绝不仅限于完成当天任务，更多是查漏补缺，学习群内其它同学优秀的答题思路

点击加入答题

服务器托管云服务器 webrtc中的aec算法 webrtc中的vad算法 java中的算法思维 Vue.js

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102200.html

JS每日一题：简述一下Vue.js的template编译过程？

摘要：问简述一下的编译过程先上一张图大致看一下整个流程从上图中我们可以看到是从后开始进行中整体逻辑分为三个部分解析器将模板字符串转换成优化器对进行静态节点标记，主要用来做虚拟的渲染优化代码生成器使用生成函数代码字符串开始前先解释一下抽象 20190215问简述一下Vue.js的template编译过程？先上一张图大致看一下整个流程showImg(https://image-static....

NicolasHe 2019-08-23 15:16 评论0 收藏0
JS每日一题：什么情况下适合使合vuex？Vuex使用中有几个步骤？

摘要：什么情况下适合使合使用中有几个步骤开始之前先简单了解一下定义是一个状态管理机制采用集中式存储应用所有组件的状态嗯，就是一句话能说明白的，没明白的，我们用代码再理解一下什么叫集中式式存储比如下面这段代码，同时需要用到，那么我们首先能想到就是在 20190121 什么情况下适合使合vuex？Vuex使用中有几个步骤？开始之前先简单了解一下vuex 定义: vuex是一个状态管理机制,采用...

wow_worktile 2019-08-23 15:22 评论0 收藏0
JS每日一题: Vue中mixin怎么理解？

摘要：两个对象键名冲突时，取组件对象的键值对也使用同样的策略进行合并。代码理解全局混合也可以全局注册混合对象。注意使用一旦使用全局混合对象，将会影响到所有之后创建的实例为自定义的选项注入一个处理器。 20190122 Vue中mixin怎么理解？ mixin是为了让可复用的功能灵活的混入到当前组件中，混合的对象可以包含任意组件选项（生命周期，指令之类等等）, mixin翻译过来叫混合,高级的...

jubincn 2019-08-23 15:28 评论0 收藏0
JS每日一题：Vue-router有哪些钩子？使用场景？

摘要：问有哪些钩子使用场景的实现可以点这里前面我们用大白话讲过什么是钩子，这里在重复一下，就是在什么什么之前什么什么之后英文叫专业点叫生命周期，装逼点可以叫守卫中也存在钩子的概念分为三步记忆全局守卫路由独享守卫组件独享守卫全局守卫很好理解，全 20190218问 Vue-router有哪些钩子？使用场景？ router的实现可以点这里前面我们用大白话讲过什么是钩子，这里在重复一下，就是在...

张金宝 2019-08-23 15:18 评论0 收藏0
JS每日一题:new Vue()中发生了什么？

摘要：问中发生了什么先从语法上分析，关键字在语言中代表实例化一个对象而实际上是一个类我们简单看一下源码源码地址从源码可以看到类中非常干净，只是执行了一个私有函数并且只能通过关键字初始化接着我们追踪至函数源码地址从上面的代码我们看见很清淅的 20190214问 new Vue()中发生了什么？先从语法上分析，new关键字在js语言中代表实例化一个对象, 而Vue实际上是一个类, 我们简单看一...

fobnn 2019-08-23 15:13 评论0 收藏0