当前位置:   article > 正文

Vue3.0性能优化之重写虚拟Dom_vue3重写onmounted

vue3重写onmounted

Vue3.0中的性能优化

2020年4月21号,Vue的作者尤雨溪在直播中分享了Vue.js 3.0 Beta最新进展, 向我们展示里Vue3中的六大亮点,其中首先提到的就是Performance性能。

Vue3.0中的六大亮点

  • Performance:性能更比Vue 2.0强。
  • Tree shaking support:支持对无用模块的“剪枝”,实现按需打包
  • Composition API:基于函数的组合式API
  • Fragment, Teleport, Suspense:“碎片”,Teleport即Protal传送门,“悬念”
  • Better TypeScript support:更优秀的Ts支持
  • Custom Renderer API:暴露了自定义渲染API

Performance

  • 重写了虚拟Dom
  • 编译模板的优化。
  • 更高效的组件初始化。
  • update性能提高1.3~2倍。
  • SSR速度提高了2~3倍。

在Vue2,我们就已经体会到了VDom的优秀表现,尽管如此在Vue3.0中仍然对虚拟Dom进行了重写,这也是Vue3性能能够得到提升的重要原因之一,接下来我们就跟着尤大了解Vue3.0中VDom到底是如何得到优化的。

1. PatchFlag

尤大在直播时使用了Vue 3 Template Explorer这个工具给我们做了一些demo展示

动态数据

vue3编译模板
左边是我们要编译的实际代码,右边是编译模板生成的渲染函数

如果我们要编译以下代码

<div>
  <span>static<span/>
  <span>{
  { msg }}</span>
</div>
  • 1
  • 2
  • 3
  • 4
  • 5

将会被编译成这个样子

import {
    createVNode as _createVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock } from "vue"

export function render(_ctx, _cache) {
   
  return (_openBlock(), _createBlock("div", null
  • 1
  • 2
  • 3
  • 4
  • 5
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/IT小白/article/detail/133854
推荐阅读
相关标签
  

闽ICP备14008679号