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

最新推荐文章于 2025-07-18 17:49:11 发布

IT界中的一枝梅

最新推荐文章于 2025-07-18 17:49:11 发布

阅读量438

点赞数 4

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/u011074688/article/details/148926351

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

1.开篇

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

2.虚拟dom

2.1虚拟 DOM 的工作原理

创建虚拟 DOM
更新虚拟 DOM
比较虚拟 DOM
更新真实 DOM

2.1 虚拟 DOM 的优势

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

3 Diff 算法

3.1 目标

找出差异
最小化更新

3.2 框架

vue2 双端比较
vue3 单端比较
react 单一树结构的比较

4.真实 DOM

1.vue vapor

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

2.编译后的代码

 
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("<h1></h1>")
const t1 = _template("<button>Increase</button>")
_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(`<div><h1>Count: </h1><button>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$;
    }
    )();
}