Vue 3 新特性

Composition API

为Vue应用提供更好得逻辑复用和代码组织

setup

注意：由于执行setup时尚未创建实例，因此在setup选项中没有this，这就意味着除了props之外，你将无法访问组件中声明得任何属性，setup选项应该是接收props和context得函数

参数

1. props

setup 函数中的第一个参数是 props。正如在一个标准组件中所期望的那样，setup 函数中的 props 是响应式的，当传入新的 prop 时，它将被更新。注意：因为 props 是响应式的，你不能使用 ES6 解构，因为它会消除 prop 的响应性，如果需要解构 prop，可以通过使用 setup 函数中的 toRefs 来安全地完成此操作。

1. context

传递给 setup 函数的第二个参数是 context。context 是一个普通的 JavaScript 对象，它暴露三个组件的 property：

• Attribute（非响应式对象）——context.attrs
• 插槽（非响应式对象）——context.slots
• 触发事件（方法）——context.emit

context 是一个普通的 JavaScript 对象，也就是说，它不是响应式的，这意味着你可以安全地对 context 使用 ES6 解构。

带ref得响应式变量

ref接收参数并返回包装在具有value属性得对象中，然后使用该属性访问或修改响应式变量得值