关于ChatGPT教我TypeScript的setup的六大特点这件事

script setup 是什么意思？

<script setup lang="ts"> 

由于本人是后端开发者，前端的开发一直停留在Vue舒适区，第一次看到这行代码，人一下子呆住了，但是好在内部的代码并不是很难，所以就没管这个问题了。但是有问题一直拖着不是好事，于是我问了问我亲爱的GPT老师。

GPT老师的回答：

1. 简化的 <script> 区块：<script setup> 可以代替传统的 <script> 区块，让你在组件中更轻松地编写响应式数据、计算属性、方法等代码。

2. 自动推断类型：使用 TypeScript 时，<script setup> 可以自动推断变量和属性的类型，无需显式声明类型。

• 传统方式：

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

• 该方式

<script setup>
let count = 0
</script>

3. 无需 return：你不需要使用 return 关键字来返回组件选项，<script setup> 会自动返回响应式对象。

• 传统方式：

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue 3'
    }
  }
}
</script>

• 该方式

<script setup> const message = 'Hello, Vue 3' </script>

5. 无需 ref：你不需要使用 ref 来定义响应式数据，<script setup> 会自动处理。

• 传统方式

<script>
import { ref } from 'vue'
export default {
setup() {
 const count = ref(0)
 return {
   count
 }
}
}
</script>

• 该方式

<script setup>
let count = 0
</script>

6. 无需 defineProps 和 defineEmits：<script setup> 会自动处理 props 和 emits。

• 传统方式

<script>
import { defineProps, defineEmits } from 'vue'

export default {
  setup() {
    const props = defineProps(['message'])
    const emits = defineEmits(['increment'])
    
    const handleClick = () => {
      emits('increment')
    }
    
    return {
      props,
      handleClick
    }
  }
}
</script>

• 该方式

<script setup>
const handleClick = () => {
  // 直接使用 props 和 emits
  props.increment()
}
</script>

6. 组件模板中的变量直接可用：在模板中，你可以直接访问组件 <script setup> 部分中声明的变量，无需额外的声明。

非常好，GPT老师给出的答案对于现在的我来说这些点够用了，虽然不够深入，但是边开发边学嘛，不可能一步到底的，所以之后还有更深入的内容再来补充咯。