值得注意的新特性
Vue 3 中需要关注的一些新功能包括：
-
[
createRendererAPI 来自@vue/runtime-core -
[单文件组件组合式 API 语法糖 (
<script setup>) -
[单文件组件状态驱动的 CSS 变量 (
<style vars>)
组合式API
什么是组合式 API？
先想象一下下面的场景：
-
场景一：当你维护前任小伙伴成千行的祖传代码，为理解代码含义在不断的
template、data、methods等代码中痛苦跳转时 -
场景二：当你苦苦找不到前任小伙伴
this.xxx()方法定义，却不敢删掉，最终在各种mixin文件中找到它的真身时
用组件的选项 (data、computed、methods、watch) 组织逻辑在大多数情况下都有效。但是，当我们的组件变得更大时，逻辑关注点的列表也会增长。这可能会导致组件难以阅读和理解，尤其是对于那些一开始就没有编写这些组件的人来说。
如果我们能够将与同一个逻辑关注点相关的代码配置在一起会更好。而这正是组合式 API 使我们能够做到的。
这个时候真的需要composition api这样的开发方式来组织你的代码了。
通过一张图更直接的与options api进行对比:
组合式 API 基础
为了开始使用组合式 API，我们首先需要一个可以实际使用它的地方。在 Vue 组件中，我们将此位置称为 setup。
Setup
setup 组件选项
我们从 setup 返回的所有内容都将暴露给组件的其余部分 (计算属性、方法、生命周期钩子等等) 以及组件的模板。
参数
使用 setup 函数时，它将接受两个参数：
propscontext
第一个参数是 props ，它在 setup 内部也是响应式的（注意不要对 props 直接使用解构赋值，这样会破坏响应式，但是可以使用 toRefs来实现安全的解构）。
// MyBook.vue import { toRefs } from 'vue' setup(props) { const { title } = toRefs(props) console.log(title.value) }
第二个参数是 context ，它是一个普通的对象（不是响应式的）并且暴露出3个组件属性。
// MyBook.vue export default { setup(props, context) { // Attributes (Reactive Property) console.log(context.attrs) // Slots (Reactive Property) console.log(context.slots) // Emit Events (Method) console.log(context.emit) } }
setup会在组件实例创建前，props初始化后被执行，因此只能访问 props 、attrs 、slots 、emit，而无权访问组件内部的 data、computed、 methods。注意setup()内部的this不会是Vue的实例的引用。
setup可以返回一个对象，它的所有属性都将暴露给其他的组件选项（ computed 的属性、 methods 、生命周期钩子等）以及组件模板。也可以返回一个渲染函数，该函数可以直接使用在同一作用域中声明的响应式状态：
Composition API 也包含了类似组件参数的生命周期钩子函数，但会以前缀为 onXXX 这样的名字，像是 mounted 对应的是 onMounted，接受一个回调，这个回调会在组件的钩子被调用时执行。
未完待续。。。。
