对于 vue3.0 特性你有什么了解的吗?

Vue 3.0 的目标是让 Vue 核心变得更小、更快、更强大,因此 Vue 3.0 增加以下这些新特性:

(1)监测机制的改变
3.0 将带来基于代理 Proxy 的 observer 实现,提供全语言覆盖的反应性跟踪。这消除了 Vue 2 当中基于 Object.defineProperty 的实现所存在的很多限制:

  • 只能监测属性,不能监测对象
  • 检测属性的添加和删除;
  • 检测数组索引和长度的变更;
  • 支持 Map、Set、WeakMap 和 WeakSet。

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

  • 用于创建 observable 的公开 API。这为中小规模场景提供了简单轻量级的跨组件状态管理解决方案。
  • 默认采用惰性观察。在 2.x 中,不管反应式数据有多大,都会在启动时被观察到。如果你的数据集很大,这可能会在应用启动时带来明显的开销。在 3.x 中,只观察用于渲染应用程序最初可见部分的数据。
  • 更精确的变更通知。在 2.x 中,通过 Vue.set 强制添加新属性将导致依赖于该对象的 watcher 收到变更通知。在 3.x 中,只有依赖于特定属性的 watcher 才会收到通知。
  • 不可变的 observable:我们可以创建值的“不可变”版本(即使是嵌套属性),除非系统在内部暂时将其“解禁”。这个机制可用于冻结 prop 传递或 Vuex 状态树以外的变化。
  • 更好的调试功能:我们可以使用新的 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 优化,提供了更多的内置功能

原文地址:https://www.cnblogs.com/Rivend/p/12630779.html

时间: 2024-11-05 18:30:25

对于 vue3.0 特性你有什么了解的吗?的相关文章

关于vue的计算属性以及双向绑定的原理理解(vue2.x)以及vue3.0

vue的计算属性: 1.什么是计算属性? 计算属性的目的是用于对数据进行简单运算的,若在模板中放过多的计算逻辑会导致模板难以维护. 计算属性是基于它们的依赖进行缓存的.计算属性只有在它的相关依赖发生改变时才会重新求值. 2.计算属性如何使用? 1.在一个计算属性里可以完成各种复杂的逻辑,包括运算.函数调用等,只要最终返回一个结果就可以. computed: { reverseText: function(){ return app1.text.split('').reverse().join('

C#3.0 特性

C#3.0特性 隐式类型的本地变量和数组 对象初始值设定项 集合初始值设定项 扩展方法 匿名类型 lambda表达式 查询关键字 自动实现的属性 分布方法定义 https://msdn.microsoft.com/zh-cn/library/bb383815(v=vs.90).aspx

JDK5.0 特性线程 同步装置之CountDownLatch 同步装置之CyclicBarrier 线程 BlockingQueue

来自:http://www.cnblogs.com/taven/category/475298.html 1 import java.util.concurrent.CountDownLatch; 2 import java.util.concurrent.ExecutorService; 3 import java.util.concurrent.Executors; 4 5 /** 6 * CountDownLatch维护一个计数器,等待这个CountDownLatch的线程必须等到计数器为

JDK5.0 特性-线程同步装置之Semaphore

来自:http://www.cnblogs.com/taven/archive/2011/12/17/2291474.html 1 import java.util.ArrayList; 2 3 import java.util.concurrent.ExecutorService; 4 5 import java.util.concurrent.Executors; 6 7 import java.util.concurrent.Semaphore; 8 9 import java.util.

JDK5.0 特性-线程 Condition

来自:http://www.cnblogs.com/taven/archive/2011/12/17/2291471.html 1 import java.util.concurrent.ExecutorService; 2 3 import java.util.concurrent.Executors; 4 5 import java.util.concurrent.locks.Condition; 6 7 import java.util.concurrent.locks.Lock; 8 9

JDK5.0 特性-线程锁Lock

来自:http://www.cnblogs.com/taven/archive/2011/12/17/2291470.html 1 import java.util.concurrent.ExecutorService; 2 3 import java.util.concurrent.Executors; 4 5 import java.util.concurrent.Future; 6 7 import java.util.concurrent.locks.Lock; 8 9 import j

JDK5.0 特性-线程任务执行架构 ScheduledExecutorService

来自:http://www.cnblogs.com/taven/archive/2011/12/17/2291469.html 1 import java.util.concurrent.Callable; 2 3 import java.util.concurrent.ExecutionException; 4 5 import java.util.concurrent.ExecutorService; 6 7 import java.util.concurrent.Executors; 8

JDK5.0特性,使用ProcessBuilder执行本地命令

1 import java.io.BufferedReader; 2 3 import java.io.BufferedWriter; 4 5 import java.io.File; 6 7 import java.io.IOException; 8 9 import java.io.InputStream; 10 11 import java.io.InputStreamReader; 12 13 import java.io.OutputStreamWriter; 14 15 import

JDK5.0特性-线程 Callable和Future

来自:http://www.cnblogs.com/taven/archive/2011/12/17/2291466.html 1 import java.util.concurrent.Callable; 2 3 import java.util.concurrent.ExecutorService; 4 5 import java.util.concurrent.Executors; 6 7 import java.util.concurrent.Future; 8 9 10 11 /**