＜script setup＞

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      count: 0
    }
  }
}
</script>

<script setup>
import { ref } from 'vue'

defineProps({
  msg: String
})

const count = ref(0)
</script>

这两段JavaScript代码都是使用Vue.js框架编写的组件定义，但它们之间存在一些关键差异，主要体现在语法和Vue版本上：

1. Vue版本:

   • 第一个脚本（不带<script setup>）适用于Vue 2和Vue 3，因为它使用了Vue 2的选项式API。
   • 第二个脚本使用了<script setup>语法糖，这是Vue 3.0+特有的 Composition API的特性。

2. 组件定义方式:

   • 第一个脚本定义了一个标准的Vue组件，使用选项对象来配置组件的属性、数据、方法等。
   • 第二个脚本使用了<script setup>，这是一种更简洁的组件定义方式，专为Composition API设计。

3. Composition API:

   • 第一个脚本没有使用Composition API，而是使用了Vue 2的选项式API。
   • 第二个脚本使用了Composition API，这是Vue 3引入的新特性，它提供了一种更灵活的方式来组织组件逻辑。

4. Props定义:

   • 在第一个脚本中，props是在组件的选项对象中定义的。
   • 在第二个脚本中，defineProps是从Vue 3的Composition API中导入的，用于定义组件的属性。

5. 响应式数据:

   • 第一个脚本中，data函数返回一个包含响应式数据的对象。
   • 第二个脚本中，使用ref函数来创建响应式数据，这是Composition API的一部分。

6. 模板语法:

   • 第一个脚本通常与具有<template>部分的组件一起使用，模板中可以使用this关键字来访问组件的选项。
   • 第二个脚本使用<script setup>，它允许在模板中直接使用顶层变量和函数，而不需要this。

7. 组件结构:

   • 第一个脚本的组件结构更接近于Vue 2的风格，可能包含methods、computed、watch等选项。
   • 第二个脚本的结构更简洁，所有逻辑都在顶层，这使得组件更容易编写和理解。

8. 使用场景:

   • 如果你正在使用Vue 2或不使用Composition API，你可能会使用第一个脚本的语法。
   • 如果你正在使用Vue 3，并且想要利用Composition API的优势，你可能会使用第二个脚本的语法。

总的来说，<script setup>语法糖提供了一种更简洁、更现代的方式来编写Vue组件，它使得组件逻辑更加集中和易于管理。然而，这种语法糖只适用于Vue 3项目中使用Composition API的场景。