[vue] Virutal DOM 虚拟DOM?

[zhuanghaixin]

Virtual DOM 概述

什么是虚拟DOM

是由普通的js对象来描述DOM对象，因为不是真实的DOM对象，所以叫Virtual DOM

let element=document.querySelector('#app')
let s=''
for(var key in element){
s+=key+','
}
console.log(s)

这个例子可以看出来，我们创建DOM对象的成本是非常高的

为什么使用虚拟DOM

• 手动操作DOM比较麻烦，还需要考虑浏览器兼容问题，虽然jQuery等库简化DOM操作，但是随着项目复杂性提高，DOM操作变得复杂，既要考虑操作DOM，又要考虑操作数据
• 为了简化DOM的复杂操作，出现了各种MVVM框架，MVVM #118 框架解决了视图和状态的同步问题 （当数据发生变化自动更新换代视图，当视图发生变化，自动更新数据）

• 为了简化视图操作，我们可以使用(template)模板引擎,但是模板引擎没有解决跟踪状态变化的问题，于是虚拟DOM出现了
• 虚拟DOM的好处就是当状态改变时，不需要立即更新DOM，只需要创建虚拟树来描述DOM,Virtual DOM内部将弄清楚如何有效diff的更新DOM
• 简言之， 虚拟DOM可以维护程序的状态，跟踪上一次的状态
• 通过比较前后两次状态的差异更新真实的DOM

  虚拟DOM的作用和虚拟DOM库

  虚拟DOM的作用

• 维护视图和状态的关系
• 复杂视图情况下提升渲染性能
• 除了渲染DOM以外，还可以实现SSR,原生应用，小程序。

虚拟DOM库——Snabbdom

[zhuanghaixin]

Snanndom基本使用

创建项目

• 创建项目，并安装parcel

  mkdir snbbdom-demo
  cd snbbdom-demo
  yarn init -y  # 创建 package.json
  yarn add parcel-bundler # 本地按照 parcel

• 配置package.json的scripts

  "scripts": {
  "dev": "parcel index.html --open",
  "build": "parcel build index.html"
  }

  导入Snabbdom

• 安装

  yarn add snabbdom@0.7.4

  {
  "name": "snabbdom-demo",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
  "parcel-bundler": "^1.12.4",
  "snabbdom": "^0.7.4"
  },
  "scripts": {
  "dev": "parcel index.html --open",
  "build": "parcel build index.html"
  }
  }

  
  // snabbdom的核心仅提供了最基本的功能，只导出了三个函数 init() h() thunk()
  // 1.init()是一个高阶函数，返回patch()
  // 2.h()是返回虚拟节点VNode,这个函数我们在vue.js使用过
  /*
  new Vue({
  router,
  store,
  render:h=>h(App)
  }).$mount('#app')
  */
  // 3.thunk是一种优化策略，可以在处理不可变数据的时候使用
  import {init,h,thunk} from 'snabbdom'

console.log('init') console.log(init) console.log('h') console.log(h) console.log('thunk') console.log(thunk)

## 第一个例子  输出hello world

import {h,init} from 'snabbdom'

// 1. 输出hello world // 返回值 patch函数 作用对比两个vnode的差异更新到真实DOM let patch=init([])

let vNode=h('div#container.cls','Hello World') // 将来要替换app里面到内容 let app=document.querySelector('#app') // patch函数， 第一个参数可以是DOM，内部会把DOM元素转换为VNode // 第二个参数 VNode // 返回值 VNode let oldVNode =patch(app,vNode)

![image](https://user-images.githubusercontent.com/24459069/103759096-1f6f6f80-504e-11eb-8bee-5186f087121e.png)

## 在某个时刻，从服务器中获取数据，并且把新的数据重新赋值给页面中的div
```js
import {h,init} from 'snabbdom'

// 1. 输出hello world
// 返回值 patch函数 作用对比两个vnode的差异更新到真实DOM
let patch=init([])

let vNode=h('div#container.cls','Hello World')
// 将来要替换app里面到内容
let app=document.querySelector('#app')
// patch函数， 第一个参数可以是DOM，内部会把DOM元素转换为VNode
// 第二个参数 VNode
// 返回值 VNode
let oldVNode =patch(app,vNode)

// 在某个时刻，从服务器中获取数据，并且把新的数据Hello Snabbdom重新赋值给页面中的div
vNode=h('div','Hello Snabbdom')
patch(oldVNode,vNode)

第二个例子， 在页面中的div放置子元素h1,p

import {h,init} from 'snabbdom'

// 1.  在页面中的div放置子元素h1,p
// 返回值 patch函数 作用对比两个vnode的差异更新到真实DOM
let patch=init([])

let vNode=h('div#container',[
    h('h1','Hello Snabbdom'),
    h('p','这是一个P标签')
])
// 将来要替换app里面到内容
let app=document.querySelector('#app')
// patch函数， 第一个参数可以是DOM，内部会把DOM元素转换为VNode
// 第二个参数 VNode
// 返回值 VNode
let oldVNode =patch(app,vNode)

// // 在某个时刻，从服务器中获取数据，两秒钟后，h1,p替换，重新赋值给页面中的div
setTimeout(()=>{
    console.log(1)
    vNode=h('div#contaiiner',[
        h('h1','Hello world'),
        h('p','Hello p')
    ])
    // 1. 更新DOM
    // patch(oldVNode,vNode)
    // 2. 清空DOM 用注释标签代替
    patch(oldVNode,h('!'))
},2000)

[zhuanghaixin]

Snabbdom 模块使用

常用模块

• class

  • 切换类样式
  • 注意：给元素设置类样式是通过sel选择器

• props

  • 和attributes模块相似，设置DOM元素的属性 element[attr]=value
  • 不处理布尔类型的属性

• attributes

  • 设置DOM元素的属性 使用setAttribute()
  • 处理布尔类型的属性

• dataset

  • 设置data-*的自定义属性

• style

  • 设置行内样式，支持动画
  • delayed/remove/desory

• eventlisteners

  • 注册和移除事件

    模块使用

• 步骤

  • 导入
  • init() 注册模块
  • 使用h()函数创建VNode的时候，可以把第二个参数设置为对象，其他参数往后移

    
    import {init, h} from 'snabbdom'
    // 1 导入模块
    import style from 'snabbdom/modules/style'
    import eventlisteners from 'snabbdom/modules/eventlisteners'
    // 2 注册模块
    let patch = init([
    style,
    eventlisteners
    ])

// 3 使用h()函数的第二个参数传入模块需要的数据（对象） let vNode = h('button', { style: { backgroundColor: 'red' }, on: { click: eventHandler } }, [ h('button','按钮+1') ]) let num=0 function eventHandler() { console.log( '当前数字', num++

)

}

let app = document.querySelector('#app')

let oldVNode = patch(app, vNode)

[zhuanghaixin]

Snabbdom 源码分析

Snabbdom 核心

• 使用h()函数创建JavaScript对象（VNode)描述真实DOM
• init()设置模块，创建patch()
• patch()比较新旧两个VNode
• 把变化的内容更新到真实DOM树上