美文网首页
Vue原理「十二」-- vdom和diff算法 *****

Vue原理「十二」-- vdom和diff算法 *****

作者: loushumei | 来源:发表于2020-12-15 22:37 被阅读0次

diff 算法概述

diff即对比,是一个广泛的概念,如linux diff、git diff
两个JS对象也可以做diff
两颗树做diff,如vdom diff

树diff 时间负责度是o(n^3)

第一,遍历tree1;第二,遍历tree2
第三,排序
1000个节点,要计算 1亿次,算法不可用

优化时间复杂度到o(n)

之比较同一级,不跨级比较
tag不相同,则直接删掉重建,不再深度比较
tag和key两者都相同,则认为是相同节点,不再深度比较


在这里插入图片描述
在这里插入图片描述

patchVnode()

diff算法总结

patchVnode 逻辑
addVnodes、removeVnodes (使用情况)

updateChildren(key的重要性)
不使用key VS 使用key
不使用key:如果节点顺序变了,节点更新时需要全部删掉,
使用key:可以算出哪个key是相同的,可以直接移动

vdom和diff总结

updateChildren的过程不要深究,要知道大概过程
vdom核心概念:
h(传入的什么)
vnode(结构)
patch(作用、参数)
diff(过程、性能优化做了哪些改变、)
key(key的重要性)
vdom 存在的价值更加重要:基于数据驱动视图,控制dom操作

相关文章

  • Vue原理「十二」-- vdom和diff算法 *****

    diff 算法概述 diff即对比,是一个广泛的概念,如linux diff、git diff两个JS对象也可以做...

  • 0725-

    1.virtual DOM 和 Diff算法? 2.vue生命周期 3.vue-router原理 4.vue通信 ...

  • 虚拟DOM(Virtual DOM)中动态更新视图的diff算法

    本文主要对Virtual DOM(下文中统称为vdom)中的diff算法实现的原理进行讲解,并不会涉及到编码操作。...

  • react VS vue

    1、相同点 a、都是单向数据流 b、都使用组件 c、都使用vdom,也都使用了diff算法 2、不同点 a、vue...

  • Vue 虚拟dom & diff算法

    diff算法 vdom因为是纯粹的JS对象,所以操作它会很高效,但是vdom的变更最终会转换成DOM操作,为了实现...

  • sammary

    vue-diff算法 react 性能优化 diff算法 ,局部更新DOMshouldComponentUpdat...

  • Vue的虚拟dom

    一,vdom(virtual dom) 用js模拟dom结构,计算出最小的变更,操作dom 二,diff算法概...

  • Vue2.0的Diff算法

    原文:解析Vue2.0的Diff算法 Vue2.0加入了Virtual Dom,Vue的Diff位于patch.j...

  • VueDiff算法的简单分析和一些个人思考

    Diff算法是Vue视图动态改变的核心算法之一 本文包括对Diff算法的简单概括,和我闲的难受对Diff算法的一些...

  • Vue-diff算法原理

    虚拟DOM 虚拟DOM(Virtual DOM)是对真实DOM的JS抽象表现,能够描述DOM结构和关系,在合适的时...

网友评论

      本文标题:Vue原理「十二」-- vdom和diff算法 *****

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