Skip to content

[vue] 如何实现一个虚拟DOM?说说你的思路 #325

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

[vue] 如何实现一个虚拟DOM?说说你的思路

Activity

xzh97

xzh97 commented on Jul 2, 2019

@xzh97

就目前我想到的 就只有两种:

  1. document.fragment
    2.template模板
GCM6

GCM6 commented on Jul 21, 2019

@GCM6

虚拟DOM本身是一个JavaScript对象模拟真实DOM ,用对象的属性去描述一个DOM节点,最终也只是一个真实DOM的映射

veWangCorn

veWangCorn commented on Sep 19, 2019

@veWangCorn

createElement,render

iJay

iJay commented on Oct 22, 2019

@iJay

虚拟Dom在vue底层实现中是一个类,每次_render的时候都会实例化Vnode为一个虚拟dom对象。也就是说本质上是用一个js对象来描述dom节点。

chen0821

chen0821 commented on Sep 11, 2020

@chen0821

可以使用 document.createDocumentFragment 创建虚拟节点

Cai-zhiji

Cai-zhiji commented on Jul 7, 2023

@Cai-zhiji

定义虚拟dom的数据结构

虚拟DOM可以用一个JavaScript对象来表示,通常包含标签名、属性、子节点等信息。

{
  tag: 'div',
  attrs: { class: 'container' },
  children: [
    {
      tag: 'p',
      attrs: { id: 'paragraph' },
      children: ['Hello, world!']
    }
  ]
}

编写虚拟dom的创建和更新逻辑

可以编写函数或类来创建和更新虚拟DOM节点。
创建节点时,根据传入的标签名、属性和子节点信息,构建对应的虚拟DOM对象。
更新节点时,比较新旧虚拟DOM对象的差异,确定需要进行的DOM操作,如添加、修改或删除节点。
根据差异来更新真实DOM,使其与最新的虚拟DOM保持同步。

实现虚拟dom的渲染和挂载

虚拟DOM的渲染可以通过递归遍历虚拟DOM树来实现。
根据虚拟DOM节点的信息,创建对应的真实DOM节点,并设置相应的属性和内容。
将创建的真实DOM节点添加到父节点中,形成DOM树结构。

处理虚拟dom的更新和事件处理

当虚拟DOM发生变化时,可以通过比较新旧虚拟DOM对象,找出需要更新的节点,只对这些节点进行DOM操作,从而提高性能。
可以添加事件处理逻辑,监听虚拟DOM节点的事件,并执行相应的操作。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @haizhilin2013@iJay@xzh97@GCM6@veWangCorn

        Issue actions

          [vue] 如何实现一个虚拟DOM?说说你的思路 · Issue #325 · haizlin/fe-interview