program-spiritual/vnodepractise

Virtual DOM Prictise

vnodecases

Vue VNode 示例 和 实例演示

lodash 模板

code

本质	模板引擎	现代化框架
组件产出	html字符串	Virtual DOM

演示目录

使用 snabbdom 创建一个 VNode

Vnode 节点：

{
  "sel": "h1",
  "data": {},
  "children": "__vue_devtool_undefined__",
  "text": "prev",
  "elm": "[object HTMLHeadingElement]",
  "key": "__vue_devtool_undefined__"
}

组件的产出就是 Virtual DOM。

这里 VNode = Virtual DOM

项目运行和启动

Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Lints and fixes files

yarn lint

Customize configuration

See Configuration Reference.

vnodepractise's Issues

Cannot resolve dependency 'snabbdom/init'

解决方法：安装 [email protected]版本

原因：v1.0.1 版本相对于 v0.7.4 版本的变化，去除了 snabbdom.ts 模块，新增了 init.ts 模块，如果使用 v1.0.1 版本的话导入 h、init 函数，文档中写的是如下的方式：

import { init } from 'snabbdom/init'
import { h } from 'snabbdom/h' // helper function for creating vnodes

但是我们案例中改成这样的导入方式，问题依然无法解决。

因为模块路径并不是 snabbdom/int，这个路径是作者在 package.json 中的 exports 字段设置的，而我们使用的打包工具不支持 exports 这个字段，webpack 4 也不支持，webpack 5 beta 支持该字段。该字段在导入 snabbdom/init 的时候会补全路径成 snabbdom/build/package/init.js。

"exports": {
    "./init": "./build/package/init.js",
    "./h": "./build/package/h.js",
    "./helpers/attachto": "./build/package/helpers/attachto.js",
    "./hooks": "./build/package/hooks.js",
    "./htmldomapi": "./build/package/htmldomapi.js",
    "./is": "./build/package/is.js",
    "./jsx": "./build/package/jsx.js",
    "./modules/attributes": "./build/package/modules/attributes.js",
    "./modules/class": "./build/package/modules/class.js",
    "./modules/dataset": "./build/package/modules/dataset.js",
    "./modules/eventlisteners": "./build/package/modules/eventlisteners.js",
    "./modules/hero": "./build/package/modules/hero.js",
    "./modules/module": "./build/package/modules/module.js",
    "./modules/props": "./build/package/modules/props.js",
    "./modules/style": "./build/package/modules/style.js",
    "./thunk": "./build/package/thunk.js",
    "./tovnode": "./build/package/tovnode.js",
    "./vnode": "./build/package/vnode.js"
  }

所以如果使用 [email protected] 的话，导入 init、h，以及模块只要把把路径补全即可。

import { h } from 'snabbdom/build/package/h'
import { init } from 'snabbdom/build/package/init'
import { classModule } from 'snabbdom/build/package/modules/class'