这段时间没有看vue了，偶然间发现了vue3.0的 <script setup>的语法糖

1. setup

官方文档1 官方文档2 这里的是setup的，基础解释以及用法说明。

1-1. 参数

首先看一下setup的参数

props
context

props

props理解起来很简单就是组件传值用到的，子组件去注册props暴露给父组件去使用

export default {
  props: {
    title: String
  },
  // 上面注册暴露给外部使用，下面是外部传递接受
  setup(props) {
    console.log(props.title)
  }
}

这里有一些花里胡哨的操作方法，解构啥的，如需使用请仔细看文档。

context

context就得看需使用了，最重要的一点就是setup中与vue2.0的this有很大区别，vue2.0中是有个vue对象的this也是指向它的，而setup没有这个概念，所有的响应性需要自己去绑定，所以问题就来了；this.$emit就没法使用了；这样就诞生了这个context对象；
当然vue3.0也有this只是不推荐使用，具体看文档就好，官方的话

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)
  }
}

1-2.setup参数类型推断

defineComponent 简单理解为对组件参数进行类型校验配合

...还有很多异步或者自定义等等点这里了解

2 <script setup>

这个是听到别人说很好用，然后去官网看了一下。

这里的好处，官网已经列出来了；具体的话就是代码简介明了；
这篇文章比较详细罗列出了<script setup>

不选择<script setup>

于我而言<script setup>是封装了setup的一些操作比如组件注册，返回响应，同步但是也限制了操作，<script setup>提升了作用域，所以命名方面不能与顶层冲突第一点命名；其次对于参数也发生了改变提供defineProps 和 defineEmits**第二点新API;最后对于vue的基础属性的合并使用起来不习惯第三点个人喜好；

总结

个人观点还是不认为在使用上<script setup>是成熟的，只是开发中稳定。

admin-谈一谈<script setup>语法糖