B站vue3.0发布视频

RFC & commit

性能优化

  • 路由懒加载
  • keep-alive缓存页面
  • 使用v-show复用DOM
  • v-for 遍历避免同时使用 v-if
  • 长列表性能优化
  • 事件的销毁
  • 图片懒加载
  • 第三方插件按需引入
  • 无状态的组件标记为函数式组件
  • 子组件分割
  • 变量本地化
  • SSR

TypeScript集成

**

用于处理大规模用例的新API

  • reactive
  • ref
  • computed
  • readonly
  • watchEffect
  • watch
  • unref
  • toRef
  • toRefs
  • isRef
  • isProxy
  • isReactive
  • isReadonly
  • customRef
  • markRaw
  • shallowReactive
  • shallowReadonly
  • shallowRef
  • toRaw

分层内部模块

Vue 3.0内核仍然可以通过一个简单的<script>标签使用，但其内部结构已被彻底重写为一组解耦的模块。新的体系结构提供了更好的可维护性，并允许最终用户通过摇树来减少运行时大小的一半。

composition-api设计目的

性能改进(相对Vue2)

  • 通过摇树(减轻了多达41％的资源大小)
  • 初始渲染（加快了多达55％的速度）
  • 更新速度:（加快了133％的速度）
  • 内存占用:(最多减少54％)

提供的两个实验性功能

  • <script setup> ❝ 用于在SFC中使用Composition API的语法糖❞

  • <style vars> ❝ SFC中状态驱动的CSS变量❞

新文档链接:

来源：
https://github.com/vuejs/vue-next/releases
https://zhuanlan.zhihu.com/p/254837421