虚拟DOM和deff算法

虚拟dom && diff算法

虚拟dom是什么？
它是一个Object对象模型，用来模拟真实dom节点的结构

虚拟dom的使用基本流程
1.获取数据（ ajax fetch ）

var data = {id: 1,name: '毛毛'}

创建vdom

 /*   <div class = "box"><ul><li> {{ data.name }} </li></ul></div> */

通过render函数解析jsx，将其转换成 vdom结构

var vdom = {tag: 'div',attr: {className: 'box'},content: [{tag: 'ul',content: [{tag: 'li',content: data.name}]}]}

将vdom渲染成真实dom
使用render函数
数据更改了， data.name = ‘贝贝’


data.name = ‘贝贝'
vdom = {tag: 'div',attr: {className: 'box'},content: [{tag: 'ul',content: [{tag: 'li',content: data.name}]}]
}

使用diff算法比对两次vdom,生成patch对象

什么是jsx?
1. jsx javascript + xml
diff算法是什么？
- diff算法是比较两个文件的差异，并将两个文件不同之处，将这个不同之处生成一个补丁对象（patch）
- diff算法来源后端
- 前端将其应用于虚拟dom的diff算法
- vue中将虚拟dom的diff算法放在了 patch.js文件中
- 使用js来进行两个对象的比较（ vdom 对象模型）
- diff算法是同级比较
- 给每一个层级打一个标记，这个标记是一个数字（这个数字就是 key ）
diff算法运行结束之后，返回什么？
- 返回一个补丁对象

注意： vue是一是MVVM框架，Vue高性能的原因之一就是vdom

深化： Vue vdom vs React vdom 有何不一样？

验证 key

列表循环一定加key
key最好是使用具有唯一标识性的 id

为什么列表循环要加key ?
1. vue中列表循环需加:key=“唯一标识” 唯一标识可以是item里面id index等，因为vue组件高度复用
2. 增加Key可以标识组件的唯一性，为了更好地区别各个组件
3. key的作用主要是为了高效的更新虚拟DOM

虚拟DOM和deff算法相关推荐

虚拟DOM和Diff算法 - 入门级
什么是虚拟Dom 我们知道我们平时的页面都是有很多Dom组成,那虚拟Dom(virtual dom)到底是什么,简单来讲,就是将真实的dom节点用JavaScript来模拟出来,而Dom变化的对比,放 ...
diff算法_详解虚拟 DOM 与 DOM-Diff 算法，面试官放码过来！
Keep Moving 时至今日,前端对于知识的考量是越来越有水平了,逼格高大上了各类框架大家已经可以说无论是工作还是日常中都已经或多或少的使用过了曾经听说很多人被问到过虚拟DOM和DOM-dif ...
26.Vue列表渲染中key的作用与原理（内含虚拟DOM的对比算法详解）
目录 1.暴露问题,使用index作为key 2.使用唯一标识p.id作为key 3.不写key的配置 4.key的工作原理及虚拟DOM的对比算法 5.总结 25.Vue列表渲染_爱米酱的博客-CSD ...
vue--mixin混入以及虚拟DOM和diff算法
mixin混入使用它的好处: 将 options 中的配置项可以单独抽离出来,单独管理,这样方便维护使用: 新建一个对象用来保存 options 中某一个配置项,比如: methods 接下来要将 ...
【Vue源码解析】Vue虚拟dom和diff算法
Vue虚拟dom和diff算法 1. 简介 2. 搭建环境 1. 安装snabbdom 2. 安装webpack5并配置 3.函数 3.1 虚拟节点vnode的属性 3.2 使用h函数创建虚拟节点 ...
vue 虚拟dom和diff算法详解
虚拟dom是当前前端最流行的两个框架(vue和react)都用到的一种技术,都说他能帮助vue和react提升渲染性能,提升用户体验.那么今天我们来详细看看虚拟dom到底是个什么鬼虚拟dom的定义与 ...
vue之购物车案例升级版、v-model之lazy、number、trim的使用、fetch和axios、计算属性、Mixins、虚拟dom与diff算法 key的作用及组件化开发
文章目录 1.购物车案例升级版(含价格统计.全选/反选.商品增加减少) 2.v-model之lazy.number.trim的使用 3.fetch和axios 3.1.通过jquery+ajax实现v ...
虚拟dom与diff算法分析
好文集合: 深入浅出React(四):虚拟DOM Diff算法解析全面理解虚拟DOM,实现虚拟DOM 转载于:https://www.cnblogs.com/zqzjs/p/5798107.html
React简介、虚拟DOM、Diff算法、创建React项目、JSX语法、组件、组件声明方式、组件传值props和state、组件的生命周期
React简介: 前面只是简单介绍移动APP开发,后面还会继续深入介绍移动app开发:其中想要用ReactNative开发出更出色的应用,那么就得学好React,下面将介绍React: React 是 ...
Vue深入学习2—虚拟DOM和Diff算法
1.snabbdom 是什么? snabbdom是"速度"的意思,源码只有200行,使用TS写的,让东西变得模块化 2.snabbdom 的 h 函数如何工作? h函数用于产生虚拟 ...

虚拟DOM和deff算法

虚拟dom && diff算法

虚拟DOM和deff算法相关推荐

最新文章

热门文章