「这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战」。
什么是虚拟Dom
虚拟Dom很简单，就是用普通的js对象来进行描述dom对象，因为不是真实的dom，所以称之为虚拟dom。
为什么需要虚拟Dom
- 在没有虚拟dom之前，我们需要不断的去操作dom，还需要考虑浏览器兼容，十分的麻烦
- 随着前端的开发复杂程度加深，我们不仅需要考虑操作dom，还需要考虑操作数据
- 为了简化dom的操作，出现了很多MVVM框架解决视图、状态同步的问题
- 模板引擎可以简化视图操作面板，但是没有办法跟踪状态，也就是不能确定更新点是哪一个部分，出现闪屏的情况
准备工作
npm init -y
步骤一
先安装 parcel 为什么这里我们使用 parcel ，而不是用 webpack呢？
因为parcel的使用相对来说比较简单，0配置，我们本章主要是为了让大家对虚拟dom有一些了解！
npm install parcel-bundler -D
安装完毕之后我们对 package.json 文件进行一些改造
"scripts": {
"dev": "parcel index.html --open",
"build": "parcel build index.html"
},
步骤二
创建一个基本项目，以下是项目基本结构：
安装 snabbdom
npm i snabbdom@2.1.0
使用
import { init } from 'snabbdom/build/package/init'
import { h } from 'snabbdom/build/package/h'
const patch = init([])
// 第一个参数： 标签+ 选择器
// 第二个参数：如果是字符串就是标签中的文本内容
let vnode = h('div#container.cls', 'Hello World')
let app = document.querySelector('#app')
// 第一个参数：旧的VNode，可以是DOM元素
// 第二个参数：新的VNode
// 返回新的 VNode
let oldVnode = patch(app, vnode)
这里我们为什么不直接使用
import { init } from 'snabbdom'
import { h } from 'snabbdom'
如此进行代码引入呢？ 当然是因为当前版本不支持啊！ =。=|| 抱歉有点尴尬！
使用
我们运行命令行：
npm run dev
即可查看效果，更多的点击事件等，我们都可以在，github上查看对应的编码！
