2020 年 9 月 18 日 Vue3.0 正式发布。

Composition API

新增 setup 组件选项，是一个接受 props 和 context 的函数，使用 toRefs 对 props 进行响应式解构，可以通过 context 获取组件的 attrs slots emit 属性。返回一个可以在组件模板中使用其属性的对象，或者返回一个渲染函数，该函数可以直接使用在同一作用域中声明的响应式状态。

通过一个新的 ref/reactive 函数使任何响应式变量在任何地方起作用。

在 setup 中注册生命周期钩子，因为 setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以不需要显式地定义它们，在vue3中只有如下钩子：onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted、onErrorCaptured、onRenderTracked、onRenderTriggered。

从 Vue 导入的 watch 函数执行相同的操作

从 Vue 导入的 computed 函数在 Vue 组件外部创建计算属性

从 Vue 导入的 provide/inject 函数进行深度传值

…

Composition API 好处

  1. 同功能代码组织结构放到一起，代码可读性更强
  2. 让相同的代码逻辑在不同的组件中可以复用

Teleport

Teleport 提供了一种干净的方法，允许我们控制在 DOM 中哪个父节点下渲染了 HTML，而不必求助于全局状态或将其拆分为两个组件。一个典型的用法就是模态框组件的实现。

Fragments

也就是多根节点的组件，可以通过 v-bind="$attrs" 将外部 attribute 显式的应用于子节点。

Emits 组件选项

可以通过 emits 选项在组件上定义已发出的事件，当在 emits 选项中定义了原生事件 (如 click) 时，将使用组件中的事件替代原生事件侦听器，如果使用对象语法而不是数组语法定义发出的事件，则可以验证事件选项是否符合要求。

来自 @vue/runtime-core 的 createRenderer API 创建自定义渲染器

单文件组件 Composition API 语法糖（<script setup>）

单文件组件状态驱动的 CSS 变量 (<style vars>)

单文件组件 <style scoped> 现在可以包含全局规则或只针对插槽内容的规则

vue3 和 vue2 相比有什么不同？

  1. Object.defineProperty -> Proxy
    使用 Proxy 替代 Object.defineProperty 来实现对数据的监听

  2. Virtual Dom 重构

  3. 编译时优化