虚拟dom — 使用Snabbdom

[TOC] >[success] # 使用虚拟dom库 -- Snabbdom ~~~ 1.其实在了解vue的虚拟dom原理之前，可以先看'Snabbdom' 库，因为Vue 2.x 内部使用的 'Virtual DOM' 就是改造的 'Snabbdom' ~~~ >[info] ## Snabbdom 基本使用 [Snabbdom 文档](https://github.com/coconilu/Blog/issues/152) ~~~ 1.yarn init -y 初始化项目 2.yarn add parcel-bundler -- 这里使用打包工具'parcel' 可以零配置快速开发，当然webpack现在也支持零配置 3.yarn add snabbdom -- 安装Snabbdom 4.配置 package.json 的 scripts "scripts": { "dev": "parcel index.html --open", "build": "parcel build index.html" } 5.项目结构目录 │ index.html │ package.json └─src |- index.js 6.注意了在index.html 引入'' ~~~ >[danger] ##### 案例说明 ~~~ 1.虚拟dom操作，需要有两个虚拟dom树，是为了方便比较新老虚拟dom不同点，针对性质去渲染页面， 可以将能复用的dom直接复用不需要重新创建 2.明确了需要有新老虚拟dom的比较，在看官方'Snabbdom ' 对一些属性的介绍推荐直接看'Snabbdom 文档' 2.1.'init' -- 'init接收一个模块列表，并返回一个使用指定模块集的patch函数' 2.2.'patch' -- 'init返回的patch,第一个是表示当前视图的DOM元素或vnode。第二个是表示更新后的新视图的vnode' 通过官方的描述可以看出这个方法就是对新老虚拟dom比较的地方，它的返回值是一个虚拟dom对象 2.3.'h' -- '创建虚拟dom节点' 2.下面代码先用 'snabbdom'自带的'init' 方法声明一个后续用来比较新老虚拟dom的patch 函数， 再用'h'函数创建一个虚拟dom,利用patch 函数进行新老的虚拟dom的比较并且替换改变内容 ~~~ * html 部分 ~~~ ~~~ * js 部分 ~~~ import { h } from 'snabbdom/build/package/h'; import { init } from 'snabbdom/build/package/init'; // init 接受的参数：数组，模块 // 返回值：patch函数，作用对比两个vnode的差异更新到真实DOM // 因为要比较新老节点的不同因此我们声明一个patch用来做比较 let patch = init([]) // 第一个参数：标签+选择器 // 第二个参数：如果是字符串的话就是标签中的内容 // 使用h 创建虚拟dom let vnode = h('div#container.cls', 'hello word') let app = document.querySelector('#app') // 第一个参数：可以是DOM元素，内部会把DOM元素转换成VNode // 第二个参数：VNode // 返回值：VNde // 我们创建好的虚拟dom 需要跟页面绑定好的位置进行替换 // 才能渲染我们的虚拟dom生成的dom let oldVnode = patch(app, vnode) // 假设某一时刻数据改变 setTimeout(() => { // 假设的时刻改变后的内容 vnode = h('div', 'Hello Snabbdom') // patch 传入新老的虚拟dom对象，进行比较重新渲染 patch(oldVnode, vnode) }, 1000) ~~~ >[danger] ##### 想处理样式时间怎么做 ~~~js 1.Snabbdom 的核心库并不能处理元素的属性/样式/事件等，如果需要处理的话，可以使用模块 2.官方提供了 6 个模块 2.1.attributes设置 DOM 元素的属性，使用 setAttribute ()处理布尔类型的属性 2.2.props和 attributes 模块相似，设置 DOM 元素的属性 其中'attributes'设置 DOM 元素的属性，使用 setAttribute ()处理布尔类型的属性 'props'是element[attr] = value不处理布尔类型的属性 2.3.class切换类样式注意：给元素设置类样式是通过 sel 选择器 2.4.dataset设置 data-* 的自定义属性 2.5.eventlisteners注册和移除事件 2.6.style设置行内样式，支持动画delayed/remove/destroy 3.模块使用步骤： 3.1.导入需要的模块 3.2.init() 中注册模块 3.3.使用 h() 函数创建 VNode 的时候，可以把第二个参数设置为对象，其他参数往后移 4.现在看起来是不是 h 越来越像vue的render 函数了 ~~~ ~~~ import { h } from 'snabbdom/build/package/h' import { init } from 'snabbdom/build/package/init' // 1. 导入模块 import { styleModule } from 'snabbdom/build/package/modules/style' import { eventListenersModule } from 'snabbdom/build/package/modules/eventlisteners' // 2. 注册模块 let patch = init([ styleModule, eventListenersModule ]) // 3. 使用 h() 函数的第二个参数传入模块需要的数据（对象） let vnode = h('div', { style: { backgroundColor: 'red' }, on: { click: eventHandler } }, [ h('h1', 'Hello Snabbdom'), h('p', '这是p标签') ]) function eventHandler() { console.log('点击我了') } let app = document.querySelector('#app') let oldVnode = patch(app, vnode) vnode = h('div', 'hello') patch(oldVnode, vnode) ~~~