Vue3.0 Beta

Vue3.0 Beta新特性以及优化变更

1. 全新文档RFCs

3.0Beta发布后工作重点保证稳定性和推进各类库生成，所有进度和文档都会在RECs文档看到.

2. 3.0与2.x对比有哪些变化以及亮点

1.Performance
2.Tree-shaking support
3.Composition API
4.Fragment、Teleport、Suspense
5.Better TypeScript support
6.Custom Renderer API

• Performance 性能:

3.0修改了Virtual DOM的diff算法
2.x数据变更后，旧的Virtual DOM进行patch算法比较，并算出二者的差异，无论是静态节点还是动态节点，数据更新单个组件内部依然需要遍历该组件的整个Virtual DOM树，虽然2.x能够保证触发更新的组件最小化,但是还是存在性能消耗.
3.0动静结合:找到动态变化的部分，更新时只比对可以变化的部分,减少性能消耗.
3.0将内联函数提取出来
2.x书写内联函数,每次渲染函数执行函数都会生成一个新的内联函数,如果父组件更新而导致子组件的不必要更新.
3.0将内联函数提取出来放在缓存中,不必担心造成不需要的子组件重新渲染.
2.x数据劫持监听利用的是Object.defineProperty，它会侵入式修改对象的属性,无法检测到对象属性的新增或删除,需另外处理.
3.0利用Proxy代理，不会再初始化监听所有的Observer，proxy会'按需'来实现数据监听,支持数组的length,index的更改也能进行监听从而进行响应式数据绑定.
链接地址:https://vue-next-template-explorer.netlify.app/
3.0SSR速度提高了2~3倍

以上示例可以看出带有动态属性或者模板指令的节点都会被标识出来.无论层级嵌套多深，他的动态节点都直接与Block根节点绑定,无需再去遍历静态节点.

image.png

3.0开启事件缓存cacheHandlers

以下示例关闭cacheHandlers，onClick会被视为Props动态绑定，当替换点击事件时需要进行更新.

image.png

开启cacheHandlers后，_cache[1]，会自动生成一个缓存的内联函数,变为一个静态节点.

image.png

• Tree-Shaking

vue3配合了Tree-Shaking在编译的时候将没有用的代码全部移除例如(transition),新的 core runtime: ~10kb gzipped.

• Composition API

3.0不在推荐使用(mixin),会引起命名冲突,3.0可以将代码组织为每个函数处理特定功能的函数,解决用于多个组件无法重用相同的逻辑.可以在组件之间甚至外部组件之间提取重用逻辑.
链接:https://composition-api.vuejs.org/#logic-reuse-code-organization

• Fragments

碎片:不再限于模板中必须使用根节点进行包裹，可以支持多个根节点.
render函数也可以返回数组.

传送门:针对React Portal增加多个新功能(Chrome有个提案,会增加一个Portal原生element,为了避免命名冲突,改为Teleport)

悬念:可在嵌套层级中等待嵌套的异步依赖项,支持异步async setup(),支持异步组件.

• Better TypeScript Support

vue3是利用TypeScript编写的，可以享用自动的类型定义提示.
Javascript和TypeScript中的API相同.也可以使用js继续编写.
支持TSX .
class组件还会继续支持,但须引入vue-class-component@next，该模块还在alpha阶段.

• 自定义渲染器API

正在进行NativeScript Vue集成
用户可以尝试WebGL自定义渲染器,与普通的Vue应用程序一起使用(Vugel)
意味着以后可以通过 vue， Dom 编程的方式来进行 webgl 编程
链接:https://vugel.planning.nl/#ui-events

剩余工作

1.Docs
2.Router
3.Vuex
4.CLI
5.DevTools
6.IE11(目前还不兼容)

• 新工具(vite)

链接https://github.com/vuejs/vite
一个简易的http服务器,无需webpack编译打包,根据请求的Vue文件，即时对其编译，然后作为JavaScript发送回去.支持热更新（速度快）

• vue-test-utils（单元测试实用工具库）

• DevTools（基于chrome浏览器插件,方便调试vue应用）

• IDE Support (Vetur 插件)

• Nuxt(是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用)