vue3.x的setup语法糖

什么是setup语法糖

vue3.0时setup的变量需要return暴露出来，template才能获取。到3.2之后只需要在script标签中添加setup，例如script setup组件中不在需要特殊注册，直接引入，属性和方法便不需返回，在script setup中自定义的属性、指令可以直接在template使用。
setup参数
使用 setup 函数时，它将接收两个参数：
1.props
2.context
Props
setup 函数中的第一个参数是 props。正如在一个标准组件中所期望的那样，setup 函数中的 props 是响应式的，当传入新的 prop 时，它将被更新。

特别注意：因为 props 是响应式的，你不能使用 ES6 解构，它会消除 prop 的响应性。

如果需要解构 prop，可以在 setup 函数中使用 toRefs 函数来完成此操作：

import {
    toRefs } from 'vue'
setup(props) {
   
  const {
    title } = toRefs(props)
  console.log(title.value)
}

如果 title 是可选的 prop，则传入的 props 中可能没有 title 。在这种情况下，toRefs 将不会为 title 创建一个 ref 。你需要使用 toRef 替代它：

import {
    toRef } from 'vue'
setup(props) {
   
  const title = toRef(props, 'title')
  console.log(title.value)
}

Context
传递给 setup 函数的第二个参数是 context。context 是一个普通 JavaScript 对象，暴露了其它可能在 setup 中有用的值：

export default {
   
  setup(props, context) {
   
    // Attribute (非响应式对象，等同于 $attrs)
    console.log(context.attrs)
    // 插槽 (非响应式对象，等同于 $slots)
    console.log(context.slots)
    // 触发事件 (方法，等同于 $emit)
    console.log(context.emit)
    // 暴露公共 property (函数)
    console.log(context.expose)
  }
}

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

setup(props, {
    attrs, slots, emit, expose }) {
   
    ...
  }