虚拟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)