虚拟DOM以及Snabbdom的使用_虚拟dom&snabbdom-CSDN博客

本文链接：https://blog.csdn.net/qq_44910864/article/details/117700664

虚拟DOM

1、什么是虚拟DOM

是由普通的js对象来描述DOM对象

2、为什么使用虚拟DOM

创建DOM对象的成本高

3、虚拟DOM的好处

当状态改变时不需要立即更新DOM

4、Snabbdom的使用

创建项目

//创建项目目录
md snabbdom-demo
// 进入项目目录
 cd snabbdom-demo
// 创建package.json
npm init -y
//本地安装parcel
npm install parcel-bundler

配置package.json

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

在根目录下创建一个index.html和一个js文件夹，在js文件夹下创建一个01- basicusage.js文件

安装snabbdom

npm install snabbdom@0.7.4

引入snabbdom

import { h, thunk, init } from "snabbdom";

在01- basicusage.js编写如下代码

import { h, thunk, init } from "snabbdom";
// init方法返回值为patch函数，
// patch函数作用是对比两个vndoe的差异并更新到真实的DOM中。
// init函数的参数是一个数组，数组中的内容是模块，关于模块内容后面还会讲解
let patch = init([]);
//创建虚拟DOM
// 第一个参数：标签+选择器(id选择器或者是类选择器)
// 第二个参数：如果是字符串的话就是标签中的内容
let vnode = h("div#container.cls", "Hello World");
//我们这里需要将创建的虚拟dom，最终要渲染到`index.html`中`app`这个div中，所以这里需要获取一下该div
let app = document.querySelector("#app");
//要想将虚拟DOM渲染到`app`中，需要用到patch函数。
// 我们知道patch函数的作用是对比两个vnode的差异来更新到真实的`DOM`中。
//但是我们目前没有两个虚拟DOM.那么patch方法的第一个参数也可以是真实的DOM.patch方法会将真实的DOM转换成VNode.
// 第二个参数：为VNode
//返回值为VNode
let oldNode = patch(app, vnode);

在index.html进行引入并创建一个ID为app的div

<body>
  <div id="app"></div>
</body>
<script src="./js/01- basicusage.js"></script>

再更改文字内容可以在01- basicusage.js编写如下代码

vnode = h("div", "Hello Vue")
patch(oldNode, vnode)