精华内容
下载资源
问答
  • vue 虚拟DOM的原理

    2020-10-14 17:29:51
    主要介绍了vue 虚拟DOM的原理,帮助大家更好理解和学习vue,感兴趣朋友可以了解下
  • 前言 虚拟 DOM 结构概念随着 react 的诞生而火起来,之后 vue2.0 也加入了...作者说 vue 的虚拟 DOM 的算法是基于 snabbdom 进行改造的。 于是 google 一下,发现 snabbdom 实现的十分优雅,代码更易读。 所以决定...

    前言

    虚拟 DOM 结构概念随着 react 的诞生而火起来,之后 vue2.0 也加入了虚拟 DOM 的概念。

    阅读 vue 源码的时候,想了解虚拟 dom 结构的实现,发现在 src/core/vdom/patch.js 的地方。作者说 vue 的虚拟 DOM 的算法是基于 snabbdom 进行改造的。

    于是 google 一下,发现 snabbdom 实现的十分优雅,代码更易读。 所以决定先去把 snabbdom 的源码啃了之后,再回过头来啃 vue 虚拟 DOM 这一块的实现。

    什么是虚拟 DOM 结构(Virtual DOM)

    为什么需要 Virtual DOM

    在前端刀耕火种的时代,jquery 可谓是一家独大。然而慢慢的人们发现,在我们的代码中布满了一系列操作 DOM 的代码。这些代码难以维护,又容易出错。而且也难以测试。

    所以,react 利用了 Virtual DOM 简化 dom 操作,让数据与 dom 之间的关系更直观更简单。

    实现 Virtual DOM

    Virtual DOM 主要包括以下三个方面:

    1. 使用 js 数据对象 表示 DOM 结构 -> VNode
    2. 比较新旧两棵 虚拟 DOM 树的差异 -> diff
    3. 将差异应用到真实的 DOM 树上 -> patch

    下面开始来研究 snabbdom 是如何实现这些方面的

    目录

    源码项目路径 : snabbdom

    首先看一下整体的目录结构,源码主要是在 src 里面,其他的目录:testexamples 分别是测试用例以及例子。

    这里我们先关注源码部分

    ── h.ts   创建vnode的函数
    ── helpers
     └── attachto.ts
    ── hooks.ts  定义钩子
    ── htmldomapi.ts   操作dom的一些工具类
    ── is.ts   判断类型
    ── modules  模块
     ├── attributes.ts
     ├── class.ts
     ├── dataset.ts
     ├── eventlisteners.ts
     ├── hero.ts
     ├── module.ts
     ├── props.ts
     └── style.ts
    ── snabbdom.bundle.ts 入口文件
    ── snabbdom.ts  初始化函数
    ── thunk.ts  分块
    ── tovnode.ts   dom元素转vnode
    ── vnode.ts  虚拟节点对象
    复制代码

    snabbdom.bundle.ts 入口文件

    我们先从入口文件开始看起

    import { init } from './snabbdom';
    import { attributesModule } from './modules/attributes'; // for setting attributes on DOM elements
    import { classModule } from './modules/class'; // makes it easy to toggle classes
    import { propsModule } from './modules/props'; // for setting properties on DOM elements
    import { styleModule } from './modules/style'; // handles styling on elements with support for animations
    import { eventListenersModule } from './modules/eventlisteners'; // attaches event listeners
    import { h } from './h'; // helper function for creating vnodes
    
    // 入口文件
    
    // 初始化,传入需要更新的模块。
    var patch = init([
        // Init patch function with choosen modules
        attributesModule,
        classModule,
        propsModule,
        styleModule,
        eventListenersModule
    ]) as (oldVNode: any, vnode: any) => any;
    
    // 主要导出 snabbdomBundle , 主要包含两个函数,一个是 修补函数 , 一个是 h 函数
    export const snabbdomBundle = { patch, h: h as any };
    export default snabbdomBundle;
    复制代码

    我们可以看到,入口文件主要导出两个函数 ,

    1. patch函数 , 由 snabbdom.tsinit 方法,根据传入的 module 来初始化
    2. h函数 ,在 h.ts 里面实现。

    看起来 h函数比 patch 要简单一些,我们去看看到底做了些什么。

    其他

    个人博客地址

    转载于:https://juejin.im/post/5c50278ce51d453f5e6b6c28

    展开全文
  • vue虚拟dom原理剖析

    2018-12-28 00:24:09
    在vue2.0渲染层做了...了解 snabbdom的原理之后再回过头来看 vue的虚拟dom结构的实现。就难度不大了! 于是,这里将自己写的 snabbdom 源码解析的一系列文章做一个汇总。 snabbdom源码解析(一) 准备工作 snabb...
        

    在vue2.0渲染层做了根本性的改动,那就是引入了虚拟DOM。

    vue的虚拟dom是基于 snabbdom 改造过来的。了解 snabbdom的原理之后再回过头来看 vue的虚拟dom结构的实现。就难度不大了!

    于是,这里将自己写的 snabbdom 源码解析的一系列文章做一个汇总。

    换种方式阅读 ? 请查看:

    其他:

    展开全文
  • vue的虚拟DOM原理

    千次阅读 2020-06-06 14:02:51
    1、定义: 虚拟DOM其实就是一棵以 JavaScript 对象( VNode 节点)作为基础树,用对象属性来...2、虚拟dom原理流程 模板 ==> 渲染函数 ==> 虚拟DOM树 ==> 真实DOM vuejs通过编译将模板(template)转成渲

    1、定义:

    虚拟DOM其实就是用一个原生的JS对象去描述一个DOM节点,实际上它只是对真实 DOM 的一层抽象。最终可以通过一系列操作使这棵树映射到真实环境上。

    相当于在js与DOM之间做了一个缓存,利用patch(diff算法)对比新旧虚拟DOM记录到一个对象中按需更新, 最后创建真实的DOM

    2、虚拟dom原理流程

    模板 ==> 渲染函数 ==> 虚拟DOM树 ==> 真实DOM

    • vuejs通过编译将模板(template)转成渲染函数(render),执行渲染函数可以得到一个虚拟节点树

    • 在对 Model 进行操作的时候,会触发对应 Dep 中的 Watcher 对象。Watcher 对象会调用对应的 update 来修改视图。

    虚拟 DOM 的实现原理主要包括以下 3 部分:

    1. 用 JavaScript 对象模拟真实 DOM 树,对真实 DOM 进行抽象;
    2. diff 算法 — 比较两棵虚拟 DOM 树的差异;
    3. pach 算法 — 将两个虚拟 DOM 对象的差异应用到真正的 DOM 树。
    图解:在这里插入图片描述
    • 渲染函数: 渲染函数是用来生成Virtual DOM的。
    • VNode虚拟节点: 它可以代表一个真实的dom节点。通过 createElement 方法能将 VNode 渲染成 dom 节点。简单地说,vnode可以理解成节点描述对象,它描述了应该怎样去创建真实的DOM节点
    • patch(也叫做patching算法): 虚拟DOM最核心的部分,它可以将vNode渲染成真实的DOM,这个过程是对比新旧虚拟节点之间有哪些不同,然后根据对比结果找出需要更新的的节点进行更新

    3、虚拟DOM好处

    • 具备跨平台的优势–由于 Virtual DOM 是以 JavaScript 对象为基础而不依赖真实平台环境,所以使它具有了跨平台的能力,比如说浏览器平台、Weex、Node 等。
    • 操作 DOM 慢,js运行效率高。我们可以将DOM对比操作放在JS层,提高效率。运用patching算法来计算出真正需要更新的节点,最大限度地减少DOM操作,从而显著提高性能。Virtual DOM 本质上就是在 JS 和 DOM 之间做了一个缓存。
    • 提升渲染性能 Virtual DOM的优势不在于单次的操作,而是在大量、频繁的数据更新下,能够对视图进行合理、高效的更新
    • 虚拟DOM就是为了解决浏览器性能问题而被设计出来的
    展开全文
  • vue虚拟dom原理

    2018-03-26 11:31:00
    Virual DOM是用JS对象...vue的virtual dom的diff算法是基于snabbdom算法改造而来,与react的diff算法一样仅在同级的vnode间做diff,递归的进行同级vnode的diff,最终实现整个DOM树的更新。 虚拟DOM的缺点: 1. 代...

    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快

    转载于:https://www.cnblogs.com/mengff/p/8649804.html

    展开全文
  • vue虚拟dom的实现原理

    千次阅读 2018-11-26 11:21:04
    1,数据和模板相结合生成虚拟dom 2,虚拟dom转化成真是dom渲染到页面上 3,当数据发生改变时,新的数据和模板相结合会生成新的虚拟dom ...6,老的虚拟dom被清除,新的虚拟dom变成老的虚拟dom...
  • vue的虚拟dom

    2021-02-08 14:46:57
    虚拟dom的原理
  • 手动操作DOM很难跟踪以前DOM状态,而虚拟DOM可以跟踪上一次状态,维护程序状态信息。 虚拟DOM的作用 维护视图与状态关系 复杂视图情况下,可以提升渲染性能 还可以实现跨平台渲染,如SSR、原生应用、小程序...
  • Vue虚拟DOM原理及面试题(笔记) 面试题:请你阐述一下对vue虚拟dom理解 什么是虚拟dom? 虚拟dom本质上就是一个普通JS对象,用于描述视图界面结构 在vue中,每个组件都有一个render函数,每个render函数...
  • vue 虚拟dom的实现原理

    千次阅读 2020-03-23 20:23:50
    vue 虚拟dom实现原理前言一、真实DOM和其解析流程二、Virtual DOM 作用是什么?三、虚拟DOM实现 前言 Vue.js 2.0引入Virtual DOM,比Vue.js 1.0初始渲染速度提升了2-4倍,并大大降低了内存消耗。那么,什么是...
  • vue 虚拟dom实现原理

    万次阅读 2017-12-14 10:03:33
    相比于频繁手动去操作dom而带来性能问题,vdom很好dom做了一层映射关系,进而将在我们本需要直接进行dom的一系列操作,映射到了操作vdom,而vdom上定义了关于真实dom的一些关键信息,vdom完全是
  • 要想通过VUE来写HTML结构,一般官方推荐都是...var vm = new Vue({ el:"#demo1", template:` <ul class = "bg" style = "fontSize:20px" abc = "yyy"&...
  • Vue虚拟dom原理(纯文本总结版) 虚拟dom是一个用来映射真实domjs对象。我们使用jQuery或者是原生js进行编程时候,要想修改某一个dom,我们是通过使用jQuery$选择器或者是jsgetElementBy…语法先选取这个...
  • vue虚拟dom原理与实现

    2020-08-07 17:27:17
    真实dom 浏览器渲染引擎工作流程: 创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting 详细点就是: 第一步,用HTML分析器,分析HTML元素,构建一颗DOM树(标记化和树构建)。 第二步,用...
  • Vue_虚拟dom

    2020-03-26 12:57:16
    Vue的底层实现上, Vue将模板编译成虚拟dom渲染函数, 结合Vue自带响应系统, 在状态发生改变时, Vue能够智能的计算重新渲染组件的最小代价并应用到dom操作上, 这也是Vue的核心原理 为什么会使用到虚拟dom DOM是文档...
  • vue框架里面两大核心,虚拟dom和数据双向绑定原理,数据双向绑定原理已经在我另外一篇博客中详细介绍了,本文来了解一下虚拟dom以及与虚拟dom难离难舍diff算法。
  • 原理:nextTick可以在下一次更新dom之后进行回调,我问题在于,在页面加载完成时无法获取虚拟dom,而使用回调函数后就可以获取到正确dom数量,所以只需要在nextTick函数中执行jq函数就可以正确获取了。...
  • VUE源码解析——虚拟DOM,用js对象描述DOM节点一、虚拟DOM是什么?二、VNODE类VNode类型三、VNODE作用总结 一、虚拟DOM是什么? 虚拟DOM,就是用一个JS对象来描述一个DOM节点 如下示例: <div class="a" id="b...
  • DOM的作用? 文档对象模型(Document Object model,简称DOM)是针对HTML和XML文档一个API(应用程序编程接口)。 也就是说:DOM是一个接口,一个API,我们可以通过DOM这个接口来对文档进行修改。 DOM会把文档...
  • Vue的核心是双向绑定和虚拟DOM(下文我们简称为vdom),关于双向绑定可以参阅木琴的文章《剖析Vue原理&实现双向绑定MVVM》,vdom是树状结构,其节点为vnode,vnode和浏览器DOM中的Node一一对应,通过vnode的e...
  • vue虚拟DOM 和 Diff原理

    2020-09-20 20:00:46
    传说中的虚拟DOM。 class Element { constructor(tag,ats,children){ this.tag = tag; this.ats = ats || {}; this.children = children || {} } render(){ // 这个函数会生成真实DOM,会把render的结果添加...
  • vue的虚拟DOM和diff算法,是Vue面试的最后一招,当然也是极其简单了,先说Virtual Dom,来一句概念: 用js来模拟DOM中的节点。传说中的虚拟DOM。 是不是一下子秒懂 没懂再来一张 Virtual Dom就先这样,理解了就...
  • Vue虚拟Dom和Diff原理

    2021-01-08 16:58:53
    1.什么是Virtral DOM? Virtual DOM 其实就是一棵以 JavaScript 对象( VNode 节点)作为基础树,用对象属性来描述节点,实际上它只是一层对真实 DOM...对于虚拟DOM,咱们来看一个简单实例,就是下图所示这个,详细
  • Vue虚拟DOM与key属性

    2020-03-23 20:28:36
    1.虚拟DOM的原理流程: 1.用JavaScript模拟DOM树,并且渲染这个DOM树 2.在实现过程中比较新老DOM树,得到比较差异对象 3.然后把差异对象应用到渲染DOM树。 下面是流程图: 虚拟DOM核心思想就是:对复杂...
  • Vue-双向绑定以及虚拟dom原理

    千次阅读 2019-01-11 09:36:20
    Vue的核心是双向绑定和虚拟DOM 虚拟Dom(vdom) 参考:Vue原理解析之Virtual Dom, ppt Dom操作是比较浪费时间和性能的,当数据量很大时,更新DOM是非常耗费性能的操作。 当我们使用Javascript来修改我们的页面,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 550
精华内容 220
关键字:

vue的虚拟dom原理

vue 订阅