Implementation principle of virtual DOM

Virtual DOM Implementation principle of

summary

What is? Virtual DOM

• Virtual DOM（ fictitious DOM）, It's ordinary JS Object to describe DOM object

Why use Virtual DOM

• MVVM The framework solves the problem of view and state synchronization
• Template engine can simplify view operation , But there is no way to track the status
• fictitious DOM You can maintain the status of the program , Track the last status , Update the real status by comparing the difference between the two previous status DOM

fictitious DOM The role of

• Maintain the relationship between view and state
• Improve rendering performance in complex views
• Cross platform
  • Browser platform rendering DOM
  • Server rendering SSR（Nuxt.js/Next.js）
  • Native applications （Weex/React Native）
  • Applet （mpvue/uni-app） etc.

Snabbdom

install

1. Create project directory

   md snabbdom-demo
   

2. Enter project directory

   cd snabbdom-demo
   

3. establish package.json

   npm init -y
   

4. Local installation parcel

   npm install parcel-bundler -D
   npm install [email protected]
   

To configure

package.json

"scripts": {
	"dev": "parcel index.html --open",
	"build": "parcel build index.html"
}

Create directory structure

│ index.html

│ test.md

│

└─src

​ basicusage.js

Basic use

import {
    init
} from 'snabbdom/build/package/init'
import {
    h
} from 'snabbdom/build/package/h'

let patch = init([])

let vnode = h('div#container', [
    h('h1', 'Hello Snabbdom'),
    h('p', ' This is a p'),
])

let app = document.querySelector('#app')

let oldVNode = patch(app, vnode)

setTimeout(() => {
    // vnode = h('div#container', [
    //     h('h1', 'Hello world'),
    //     h('p', 'Hello p'),
    // ])
    // patch(oldVNode, vnode)

    //  eliminate div The content in   h(!) Generate an empty comment node 
    patch(oldVNode, h('!'))
}, 2000)

npm run dev function

modular

Module function

• Snabbdom The core library does not handle DOM Attribute of element / style / Events, etc. , You can register Snabbdom It is implemented by the module provided by default
• Snabbdom Modules in can be used to extend Snabbdom The function of
• Snabbdom The module in is implemented by registering the global hook function

Official module

• attributes

  Set up VNode Corresponding DOM Element attributes , For internal use setAttribute Realization . Would be right DOM Element boolean type attributes ,selected、checked etc.

• props

  Set attributes in the way of object point attributes , Do not handle Boolean attributes

• dataset

  Handle H5 Medium data- attribute

• class

  Switch class styles

• style

  Set inline style

• eventlisteners

  Register remove event

How to use the module

1. Import the required modules
2. init() Registration module in
3. h() The module... Is used at the second argument of the function

import {
    init
} from 'snabbdom/build/package/init'
import {
    h
} from 'snabbdom/build/package/h'

// 1、 The import module 
import {
    styleModule
} from 'snabbdom/build/package/modules/style'
import {
    eventListenersModule
} from 'snabbdom/build/package/modules/eventlisteners'

// 2、 Registration module 
const patch = init([
    styleModule,
    eventListenersModule
])
// 3、 Use h() The second parameter of the function , Data used in the incoming module （ object ）
let vnode = h('div', [
    h('h1', {
            style: {
                backgroundColor: 'red'
            }
        },
        'Hello world'
    ),
    h('p', {
        on: {
            click: eventHandler
        }
    }, 'Hello P'),
])

function eventHandler() {
    console.log(' Stop it ');
}

let app = document.querySelector('#app')
let oldNode = patch(app, vnode)

Source code

How to learn the source code

• Macro understanding
• Look at the source code with the target , natural
• debugging
• Reference material

Snabbdom At the heart of

• init() Set up modules , establish patch() function
• Use h() Function creation JavaScript object (VNode) Describe reality DOM
• patch() Compare the old and new VNode
• Update the changed content to the real DOM Trees

h function

effect

establish VNode object

function overloading

• Functions with different parameter numbers or parameter types
• JavaScript There is no concept of overloading in
• TypeScript There are heavy loads in , However, the implementation of overloading still adjusts parameters through code

VNode

Use JavaScript Object description DOM node

The basic structure

// vnode.ts

export declare type Key = string | number;	//  Unique identification 

//  Definition VNode Object required properties 
export interface VNode {
    sel: string | undefined;	//  Selectors 
    data: VNodeData | undefined;	//  Describe the data required in the module 
    children: Array<VNode | string> | undefined;	//  Child node 
    elm: Node | undefined;	//  At present VNode Object into DOM Elements 
    text: string | undefined;	//  Text node content 
    key: Key | undefined;	//  Unique identification 
}

//  constraint VNode in data Type of attribute 
export interface VNodeData {
    props?: Props;
    attrs?: Attrs;
    class?: Classes;
    style?: VNodeStyle;
    dataset?: Dataset;
    on?: On;
    hero?: Hero;
    attachData?: AttachData;
    hook?: Hooks;
    key?: Key;
    ns?: string;
    fn?: () => VNode;
    args?: any[];
    [key: string]: any;
}


export function vnode (sel: string | undefined,
  data: any | undefined,
  children: Array<VNode | string> | undefined,
  text: string | undefined,
  elm: Element | Text | undefined): VNode {
  const key = data === undefined ? undefined : data.key
  return { sel, data, children, text, elm, key }
}

patch Overall process analysis

• patch(oldVNode,newVNode)
• Render the changed content in the new node to the real DOM, Finally, the new node is returned as the old node for the next processing
• Contrast the old with the new VNode Whether the same node （ Node key and sel identical ）
• If it's not the same node , Delete the previous content , To render
• If it is the same node , Then judge the new VNode Is there a text, If there is and with oldVNode Of text Different , Update the text directly
• If the new VNode Yes children, Determine whether there are changes in the child nodes

init

Cache parameters , return patch function