虛擬dom -- 使用Snabbdom · Vue&&TypeSprict--基礎總結

[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 引入'<script src="./src/index.js"></script>' ~~~ >[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 部分 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"></div> <script src="./src/index.js"></script> </body> </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) ~~~