vue|Vue3.0简介
阅读不怎么舒适,参看我的语雀原文:https://www.yuque.com/xiaocao-4xvac/zxcdyp/qepwd0
更快,初始渲染/更新最高可提速一倍
1.virtual dom实现完全重构
2.结合模板编译提高运行时性能。减少运行时开销
例如:模板里很多没有变动的地方,但是virtual dom 不可避免的生成节点对它们进行比对。可以通过在编译时对模板进行分析,来减少这些运行时的开销
3. component fast path
模板编译为virtual dom的渲染函数时,2.0不管原生元素还是组件都是统一作为字符串传入创建虚拟node的函数中去,判断元素是是组件还是原生元素时是运行时做的。3.0给明确的区别 component fast path
4.尽可能生成所谓的monomorphics calls
生成VNode的时候,函数调用尽可能保持形状一致,也就是有同样个数的参数。这样是我们生成的代码更易于被js引擎去优化
5.在生成渲染函数时运行时留下一些hint
模板中直接静态分析一个元素所包含的子元素的类型,在生成渲染函数时运行时留下一些hint。像元素类型,子元素个数
文章图片
6.优化slots生成
把所有的slot都跟scope slot一样统一生成为一个函数,可以lazy的一个函数。函数传给子组件,由子组件决定什么时候调用这个函数。当子组件调用函数的时候,函数的依赖就成为了子组件的而不是父组件的,当函数变动的时候就只需要重新渲染子组件,子组件与父组件的依赖分离,得到非常精确的组件级依赖搜集,避免不必要的组件更新。不存在需要需要手动优化组件更新的问题
文章图片
7.静态内容提取
2.x已实现不会变的模板直接提取出来,之后的更新中直接复用,在VNode比对时直接跳过。但是当模板中任意元素包含任意动态内容时,整个元素无法被静态化
3.0元素本身的静态属性,如果data也是一致的,那么整个元素就是一样的。在比对的时候就可以跳过该元素,比对子节点就可以了
文章图片
8.内联函数提取
cache内联函数
文章图片
9.基于Proxy的新数据监听系统
基于proxy即所谓的lazy by default,只有当一个数据被用到的时候才会去监听它
利用Proxy减少组件实例初始化开销
文章图片
更小 【vue|Vue3.0简介】调整代码结构使其可以和Tree-shaking配合起来,没有用到的代码在编译时扔掉
通过按需引入工具函数来实现,例:
文章图片
更易于维护
1.TypeScript重写vue3
主要是针对vue开发团队来讲,vue3代码从flow迁移到TypeScript.完全用ts重写了代码,typescript对社区维护和支持更好一些
2.内部模块解耦,利于用户进行源码的解读
文章图片
3.编译器重构
文章图片
更好的多端渲染支持 虽然vue2已经支持,但是需要开发者去fork Vue的源码来实现这些功能,vue3会引入Custom Render API来解决这个问题。
文章图片
新功能
响应式数据监听API
通过引入observable和effect手动创建显示的响应式对象
文章图片
轻松排查组件更新的触发原因
提供renderTriggered功能来检测
文章图片
更好的TypeScript支持
包括原生的Class API 和TSX
更好的警告信息
文章图片
Experimental Hooks API
一种逻辑复用机制,大概率取代mixins
Time Slicing Support
能够使框架在进行js计算的时候,把js计算切成一块一块,一帧一帧的进行,解决框架导致的一些性能问题:
在浏览器的主线程里面进行大量的js操作,会使整个主线程被block,导致浏览器处于无响应状态,用户无法进行后续操作。
一种可以改进这个问题的方法是:可以通过每16ms计算之后,把yield给browser,让后续操作能进入事件队列,然后触发更新,也会取消之前不必要的更新。例如模糊搜索,在用户输入比较快的情况下能减少请求数并能够较快响应
关于IE
会有一个专门的版本,降级为旧的getter/setter机制,并对IE中不支持的用法给出警告
在更新的基础上会尽可能保证对2.0的兼容性,保证用户平滑升级
推荐阅读
- vue-cli|vue-cli 3.x vue.config.js 配置
- 2020-04-07vue中Axios的封装和API接口的管理
- VueX--VUE核心插件
- java简介|Java是什么(Java能用来干什么?)
- 7、前端--jQuery简介、基本选择器、基本筛选器、属性选择器、表单选择器、筛选器方法、节点操作、绑定事件
- 什么是张拉膜结构雨棚(有哪些特点?)
- vue组件中为何data必须是一个函数()
- ACI注册国际心理咨询师简介和可靠性分析
- 用npm发布一个包的教程并编写一个vue的插件发布
- vuex|vuex 基础结构