vue3.0抢先看（附尤雨溪vue分享ppt）-CSDN博客

本文链接：https://blog.csdn.net/yuqing1008/article/details/103523306

点击上方“前端小苑”，选择“置顶公众号”

精品技术文章，热门资讯第一时间送达

昨天尤大在深圳的一次vue分享中，介绍了vue3.0的新特性和主要改动点，文章底部会给出分享的完整ppt。

下面我们看一下vue3.0都有哪些重要更新。

vue3.0的目标如下：

更小
更快
加强 API 设计一致性
加强 TypeScript 支持
提高自身可维护性
开放更多底层功能

更小

vue3.0提供了全局 API 和内置组件，支持 tree-shaking功能，3.0的常驻的代码尺寸控制在 10kb （gzipped）上下

更快

数据监测将基于Proxy

3.0的数据监测将基于Proxy，这样性能整体优于object.defineProperty 的 getter / setter。

长远来看，JS 引擎会继续优化 Proxy，但 getter / setter 基本不会再有针对性的优化。

Virtual DOM 重构

重构后的vdom在更新速度和内存占用均会有质的提升

使用传统的vdom，虽然 Vue 能够保证触发更新的组件最小化，但在单个组件内部依然需要遍历该组件的整个 vdom 树。在一些组件整个模版内只有少量动态节点的情况下，这些遍历都是性能的浪费，传统 vdom 的性能跟模版大小正相关，跟动态节点的数量无关。

vue3.0通过动静结合突破vdom的性能瓶颈。通过模版静态分析生成更优化的 vdom 渲染函数，将模版切分为 block(if, for, slot)，每个 block 内部动态节点位置是固定的，每个 block 的根节点会记录自己所包含的动态节点(包含子 block 的根节点)，更新时只需要直接遍历动态节点。
新策略将 vdom 更新性能与模版大小解耦，变为与动态节点的数量相关，整体比 Vue 2 性能提升 2~5 倍。

提高自身可维护性

代码采用 monorepo 结构，内部分层更清晰
TypeScript 使得外部贡献者更有信心做改动

vue3.0本身用TypeScript重写，内置 typing TSX支持，不会影响不使用 TS 的用户

开放更多底层功能

Custom Renderer


import { createRenderer } from '@vue/runtime-core'        const { render } = createRenderer({        nodeOps,patchData})

Function-based API

vue3.0已撤销Class API 提案，将提供Function-based API

const App = { setup() { // dataconst count = value(0)// computedconst plusOne = computed(() => count.value + 1) // methodconst increment = () => { count.value++ }// watchwatch(() => count.value * 2, v => console.log(v)) // lifecycleonMounted(() => console.log('mounted!'))// 暴露给模版或渲染函数return { count }}}

对比 Class API，Function-based API有如下优点：