Vue中的虚拟DOM

说明

Vue中的虚拟DOM笔记总结

虚拟DOM背景

我们知道 声明式代码的更新性能消耗 = 找出差异的性能消耗 + 直接修改的性能消耗，因此，如果我们能够最小化找出差异的性能 消耗，就可以让声明式代码的性能无限接近命令式代码的性能。而所谓的虚拟 DOM，就是为了最小化找出差异这一步的性能消耗而出现的。

虚拟DOM工作机制

虚拟 DOM 更新页面它需要重新创建 JavaScript 对象（虚拟 DOM 树），然后比较新旧虚拟 DOM，找到 变化的元素并更新它。虚拟 DOM 在 JavaScript 层面的运算要 比创建页面时多出一个 Diff 的性能消耗

虚拟DOM

用 JavaScript 对象来描述真实的 DOM 结构，其实就是所谓的虚拟 DOM,

h 函数就 是一个辅助创建虚拟 DOM 的工具函数

 import { h } from 'vue'

 export default {
 render() {
 return h('h1', { onClick: handler }) // 虚拟 DOM
 }
 }
// 其实 h 函数的返回值就是一个对象，其作用是让我们编写虚拟DOM 变得更加轻松
// 把上面 h 函数调用的代码改成 JavaScript 对象，就需要写更多内容
    export default {
      render() {
        return {
          tag: 'h1',
          props: { onClick: handler }
        }
      }
    }