【Snabbdom】虚拟DOM-Snabbdom

1、什么是虚拟DOM?

虚拟DOM是使用普通JavaScript对象描述真实DOM,本质就是Js对象。
Vue.js中的虚拟DOM借鉴了Snabbdom,并添加了Vue.js属性

2、为什么使用虚拟DOM?

1、避免直接操作DOM,提高开发效率
2、虚拟DOM在复杂视图下可以提高渲染性能。住:首次渲染,会增加开销

3、Snabbdom几个重要函数

1、h函数
  • 创建VNode对象
  • Vue中的h函数
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
2、init函数

返回patch函数

const patch = init([])
3、patch整体过程分析
  1. patch(oldVnode, newVnode)
  2. 把新节点中变化的内容渲染到真是DOM,最后返回新节点作为下一次处理的旧节点
  3. 对比新旧VNode是否相同节点(节点的key和sel是否相同)
  4. 如果不是相同节点,删除之前的内容,重现渲染
  5. 如果是相同节点,再判断新的VNode是否有text,如果有并且和oldVnode的text不同,直接更新文本内容
  6. 如果新的VNode有children,判断子节点是否有变化

4、体验Snabbdom

1、创建新项目,npm init -y 创建package.json
2、安装parcel cnpm install parcel-bundler -D
3、安装Snabbdom cnpm install [email protected]
4、修改package.json中的script

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

5、创建basicusage.js

// basicusage.js
import { init } from 'snabbdom/build/package/init'
import { h } from 'snabbdom/build/package/h'

// 1、导入模块
import { styleModule } from 'snabbdom/build/package/modules/style'
import { eventListenersModule } from 'snabbdom/build/package/modules/eventlisteners'

// 2、注册模块
const patch = init([styleModule, eventListenersModule])

// 3、使用h函数的第二个参数传入模块中使用的数据(对象)
let vnode = h('div', [
  h('h1', { style: { backgroundColor: 'pink' } }, 'Hello world'),
  h('button', { on: { click: eventHandler } }, 'Hello p')
])

function eventHandler() {
  console.log("点击了")
}

let app = document.querySelector("#app")
patch(app, vnode)

6、创建index.html

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Snabbdom-demotitle>
head>
<body>
  <div id="app">

  div>
  <script src="./src/basicusage.js">script>
body>
html>

7、执行npm run dev
【Snabbdom】虚拟DOM-Snabbdom_第1张图片
至此完成使用Snabbdom进行虚拟dom转化渲染完成。

你可能感兴趣的:(vue,javascript,前端,开发语言)