vue 3.0 有了解?

Vue3.0带来了基于Proxy的全新响应式系统,解决了Vue2.0中的一些限制,支持更多数据类型检测和更精确的变更通知。模板方面,作用域插槽改为函数形式,提升渲染性能。组件声明方式改为类式写法,便于与TypeScript结合。此外,Vue3.0还支持自定义渲染器、Fragment和Portal组件,以及通过treeshaking优化内置功能。
摘要由CSDN通过智能技术生成

1:  vue3.0 已经发布,  Vue 3.0 的目标是让Vue 核心变得更小, 更快, 更加强大 

(1): 检测机制的改变

  3.0 将带来基于Proxy 的observer 实现,  提供全语言覆盖反应性跟踪消除了Vue2.0 中基于Object.defineProperty 的实现所存在的很多限制

  (1):  只能检测属性,  不能检测对象

  (2):  检测属性添加和删除

  (3):  检测数组的索引和长度变更

  (4):  支持Map, Set, WeakMap 和 WeakSet.

新的observer 还提供了以下特性:

 1:  用于创建observer 公开API,  这为中小规模场景提供了简单轻量级的跨组件跨组件解决方案.

 2:  默认采用惰性观察,  在2.0 中, 不管反应式数据有多大, 都会在启动时被观察到.  如果你的数据采集很大,  这可能在应用启动时带来明显的开销. 在3.0 中只是观察用于渲染的应用程序最初可见的部分数据

3:  更精确的变更通知。在 2.x 中,通过 Vue.set 强制添加新属性将导致依赖于该对象的 watcher         收到变更通知。在 3.x 中,只有依赖于特定属性的 watcher 才会收到通知。

4:  不可变的 observable:我们可以创建值的“不可变”版本(即使是嵌套属性),除非系统在内部         暂时将其“解禁”。这个机制可用于冻结 prop 传递或 Vuex 状态树以外的变化。

5:  更好的调试功能:我们可以使用新的 renderTracked 和 renderTriggered 钩子精确地跟踪组件         在什么时候以及为什么重新渲染。

(2)模板

模板方面没有大的变更,只改了作用域插槽,2.x 的机制导致作用域插槽变了,父组件会重新渲染,而 3.0 把作用域插槽改成了函数的方式,这样只会影响子组件的重新渲染,提升了渲染的性能。

同时,对于 render 函数的方面,vue3.0 也会进行一系列更改来方便习惯直接使用 api 来生成 vdom 。

(3)对象式的组件声明方式

vue2.x 中的组件是通过声明的方式传入一系列 option,和 TypeScript 的结合需要通过一些装饰器的方式来做,虽然能实现功能,但是比较麻烦。

3.0 修改了组件的声明方式,改成了类式的写法,这样使得和 TypeScript 的结合变得很容易。

此外,vue 的源码也改用了 TypeScript 来写。其实当代码的功能复杂之后,必须有一个静态类型系统来做一些辅助管理。

现在 vue3.0 也全面改用 TypeScript 来重写了,更是使得对外暴露的 api 更容易结合 TypeScript。静态类型系统对于复杂代码的维护确实很有必要。

(4)其它方面的更改

vue3.0 的改变是全面的,上面只涉及到主要的 3 个方面,还有一些其他的更改:

  • 支持自定义渲染器,从而使得 weex 可以通过自定义渲染器的方式来扩展,而不是直接 fork 源码来改的方式。

  • 支持 Fragment(多个根节点)和 Protal(在 dom 其他部分渲染组建内容)组件,针对一些特殊的场景做了处理。

  • 基于 treeshaking 优化,提供了更多的内置功能

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值