首页 > 编程语言 >Vue-DIFF算法

Vue-DIFF算法

时间:2022-09-08 00:55:06浏览次数:94  
标签:el Vue patchVnode DOM VNode 算法 DIFF 节点

DIFF算法

  用 JavaScript 对象结构表示 DOM 树的结构;然后用这个树构建一个真正的 DOM 树,插到文 档当中   当状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较(diff),记录两棵树差异   把第二棵树所记录的差异应用到第一棵树所构建的真正的DOM树上(patch),视图就更新了 DIFF算法的过程   当数据发生改变时,订阅者watcher就会调用patch给真实的DOM打补丁   通过sameVnode进行判断,相同则调用patchVnode方法   patchVnode做了以下操作:     找到对应的真实dom,称为el     如果都有都有文本节点且不相等,将el文本节点设置为Vnode的文本节点     如果oldVnode有子节点而VNode没有,则删除el子节点     如果oldVnode没有子节点而VNode有,则将VNode的子节点真实化后添加到el     如果两者都有子节点,则执行updateChildren函数比较子节点   updateChildren主要做了以下操作:     设置新旧VNode的头尾指针     新旧头尾指针进行比较,循环向中间靠拢,根据情况调用patchVnode进行patch重复流程、调用createElem创建一个新节点,从哈希表寻找 key一致的VNode 节点再分情况操作

标签:el,Vue,patchVnode,DOM,VNode,算法,DIFF,节点
From: https://www.cnblogs.com/forever-ljf/p/16667847.html

相关文章

  • uniappuviewvue3开发微信小程序(二)
    我们使用HBuilderX编辑器创建完成项目后,然后登陆https://mp.weixin.qq.com/用自己的微信号码扫码登录小程序,找到开发者id,然后黏贴到我们项目manifest.json-微信小程序设置......
  • vue3项目-小兔鲜儿笔记-登录页02和购物车01
    1.登录-消息提示组件封装组件功能分析:固定顶部显示,有三种类型:成功、错误、警告显示消息提示时需要动画从上滑入组件使用的方式不够便利,封装成工具函数的方式......
  • Vue(3)-关于文本框数据框默认值效果(v-blid),数据类型注意
    序直接看代码,v-blid的使用,数据类型的转换示例代码点击查看代码<!DOCTYPEhtml><html> <head> <metacharset="utf-8"/> <title>avgScore......
  • Vue2:父组件传子组件-属性传值
    通过在子组件中用props["属性1","属性2","属性3"]接收父组件的值;语法:exportdefault{props:[],//接收父组件传的属性methods:{},data(){}......
  • Vue2:数据的劫持顺序
    this组件对象有很对属性和方法都是劫持的"别人"的:比如datamethodspropsthis在构建时给this设置成员的时间顺序data>props属性>方法>计算属性>事件中给this添......
  • react和vue这两个框架的相同点和不同点?
    相同点:1.都支持服务器端渲染2.都有virtualdom,组件化开发,通过props参数进行父子组件传值,都实现webComponent规范数据3.数据驱动视图4.都有支持native的方案,react的是r......
  • VUE
    判断list不为空:pawnList!==undefined&&pawnList!==null&&pawnList.length>0找不到vue界面:可能是自动引用的导致,删除import引用前后台实体匹配不上:数据类型不一致l......
  • Vue环境安装
    环境安装直接引用<scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>或者可以下载到本地位置,在手动导入importVuefrom'./vue.js'或是编辑......
  • vue.js3:图片镜像(翻转)并保存([email protected])
    一,js代码:<template><divstyle="background:#ffffff;"id="root"><div><button@click="restore">还原</button><button@click="flipx">水平镜像</button>......
  • letcode算法--20.有效的括号
    给定一个只包括'(',')','{','}','[',']' 的字符串s,判断字符串是否有效。有效字符串需满足:左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序闭合。每个右括号都......