简介

Misaka10032简介性能提升大约 1 分钟

该 Vue3 文档主要记录 Vue3 相比 Vue2 新增的功能和特性，其他基础属性与指令与 Vue2 相同的不再赘述

相比 Vue2 的提升

1.性能的提升

打包大小减少 41

初次渲染快 55%, 更新渲染快 133%

内存减少 54%

2.源码的升级

使用 Proxy 代替 defineProperty 实现响应式

双向数据绑定从 defineProperty for in 循环变量改成 proxy。defineProperty 是改变原对象属性标签；而 proxy 未改变原对象，而是产生新的代理对象，js 引擎更喜欢稳定的对象

重写虚拟 DOM 的实现和 Tree-Shaking

  • 区分动静态 dom，只对比动态数据 dom，用 block 标记动态标签内部的静态标签
  • 使用最长递增子序列算法，找到所有不需要移动的元素

compile 编译优化，把大量计算放在 node 层，最后浏览器只需执行最少的代码

底层源码设计层面的改变决定了 vue3 比 vue2 更快

3.拥抱 TypeScript

Vue3 可以更好的支持 TypeScript，其底层就是用 ts 编写的

新特性

  1. Composition API（组合 API）
  • setup 配置
  • ref 与 reactive
  • watch 与 watchEffect
  • provide 与 inject
  • ......
  1. 新的内置组件
  • Fragment
  • Teleport
  • Suspense
  1. 其他改变
  • 组件文件中 template 模板内无需用根节点标签包着组件元素
  • 新的生命周期钩子
  • data 选项应始终被声明为一个函数
  • 移除 keyCode 支持作为 v-on 的修饰符
  • ......