没有虚拟DOM版本的vue（Vue Vapor）

没有虚拟DOM版本的vue（Vue Vapor）

1.开篇

• 什么是虚拟dom
• 为什么用虚拟dom
• 为什么出没有虚拟DOM版本的vue

2.虚拟dom

2.1虚拟 DOM 的工作原理

1. 创建虚拟 DOM

2. 更新虚拟 DOM

3. 比较虚拟 DOM

4. 更新真实 DOM

2.1 虚拟 DOM 的优势

1. 性能优化 （减少 DOM 操作 ， 批量更新 ）
2. 可维护性 （ 声明式编程 ， 跨平台兼容性 ）

3 Diff 算法

3.1 目标

• 找出差异
• 最小化更新

3.2 框架

• vue2 双端比较

• vue3 单端比较

• react 单一树结构的比较

4.真实 DOM

1.vue vapor

• 来源于 SolidJS框架
• 减少内存
• 减少包的体积，去掉了diff
• 与vue3一样响应式

2.编译后的代码

vue3

 
import { toDisplayString as _toDisplayString,  Fragment as _Fragment, openBlock as _openBlock,  } from "/node_modules/.vite/deps/vue.js?v=3b0376db"

const _hoisted_1 = { "data-v-inspector": "src/App.vue:12:3" }

function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createElementBlock(_Fragment, null, [
    _createElementVNode("h1", _hoisted_1, "Count: " + _toDisplayString($setup.count), 1 /* TEXT */),
    _createElementVNode("button", {
      onClick: $setup.increase,
      "data-v-inspector": "src/App.vue:13:3"
    }, "Increase1")
  ], 64 /* STABLE_FRAGMENT */))
}

vue vapor

 
import { delegate as _delegate, renderEffect as _renderEffect, setText as _setText, delegateEvents as _delegateEvents, template as _template } from "/node_modules/.vite/deps/vue_vapor.js?v=ccb3e760";

const t0 = _template("
")
const t1 = _template("Increase")
_delegateEvents("click")

function _sfc_render(_ctx) {
  const n0 = t0()
  const n1 = t1()
  _delegate(n1, "click", () => _ctx.increase)
  _renderEffect(() => _setText(n0, "Count: ", _ctx.count))
  return [n0, n1]
}

solidjs

var _tmpl$ = /* @__PURE__ */
_$template(`
Count: Increase`);
import {createSignal} from "/node_modules/.vite/deps/solid-js.js?v=5b6f0856";
const App = _$$component(_REGISTRY, "App", () => {
    const [count,setCount] = createSignal(0);
    const increase = () => {
        setCount(count() + 1);
    }
    ;
    return ( () => {
        var _el$ = _tmpl$()
          , _el$2 = _el$.firstChild
          , _el$3 = _el$2.firstChild
          , _el$4 = _el$2.nextSibling;
        _$insert(_el$2, count, null);
        _el$4.$$click = increase;
        return _el$;
    }
    )();
}

5.不同框架编译后的差异

• React编译之后是Jsx函数返回的虚拟DOM
• Vue编译之后是render函数返回的虚拟DOM
• SolidJS编译之后返回的真实DOM字符串
• Svelte编译之后返回的是真实DOM片段

React由于架构机制决定了每当状态发生改变，从当前组件开始一直到叶子组件重新加载。

Vue由于给每个组件建立了watchEffect监听机制，每当组件依赖的状态发生改变，当前组件重新加载。

SolidJS和Svelte由于在编译之后就确定了当状态发生改变UI随之变化的关系，所以仅仅是具体DOM的重新加载。