vue.3.0 dom赋值_尤大大教你Vue3.0虚拟Dom快速入门【实践】

作者：蜗牛老湿

转发链接：https://juejin.im/post/5e9faa8fe51d4546fe263eda

整体尤大直播的过程，劝退大兄弟已经总结的贼棒了 ，请访问：

《聊聊昨晚尤雨溪现场针对Vue3.0 Beta版本新特性知识点汇总》

Vue3核心的Typescript，Proxy响应式，Composition解决代码反复横跳都有很棒的文章剖析了， 我总结一下虚拟Dom部分把，并对比一下React， vdom的重写也是vue3性能如此优秀的重要原因

1. 《Vue真是太好了 壹万多字的Vue知识点 超详细!》
2. 《Vue 3.0 Beta 和React 开发者分别杠上了》

Vue3.0的虚拟dom

先说结论，静态标记，upadte性能提升1.3~2倍，ssr提升2~3倍，怎么做到的呢

编译模板的静态标记

我们来看一段很常见的代码

技术摸鱼

今天天气真不错

{ {name}}

复制代码

vue2中会解析

function render() {  with(this) {    return _c('div', {      attrs: {        "id": "app"      }    }, [_c('h1', [_v("技术摸鱼")]), _c('p', [_v("今天天气真不错")]), _c('div', [_v(      _s(name))])])  }}复制代码

其中前面两个标签是完全静态的，后续的渲染中不会产生任何变化，Vue2中依然使用_c新建成vdom，在diff的时候需要对比，有一些额外的性能损耗

我们看下vue3中的解析结果

import { createVNode as _createVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock } from "vue"export function render(_ctx, _cache) {  return (_openBlock(), _createBlock("div", { id: "app" }, [    _createVNode("h1", null, "技术摸鱼"),