Vue 3中script setup和script有啥区别？该怎么选？

啥是Vue 3里的script setup和script呀？

在Vue 3中，script是我们比较熟悉的传统写法啦，就像在Vue 2里那样，在script标签里我们可以定义组件的数据、方法、生命周期钩子等等，比如说：

<template>
  <div>{{ message }}</div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello from traditional script!'
    };
  },
  mounted() {
    console.log('Component is mounted!');
  }
};
</script>

而script setup呢，它是Vue 3推出的一种新的编写组件的语法糖哦，它让我们写组件的代码更加简洁、直观，用script setup来写上面那个简单例子就变成这样啦：

<template>
  <div>{{ message }}</div>
</template>
<script setup>
import { ref } from 'vue';
const message = ref('Hello from script setup!');
onMounted(() => {
  console.log('Component is mounted!');
});
</script>

可以看到,整体的代码结构有点不太一样啦，而且感觉写起来更顺手呢。

它们在代码写法上有啥不同嘞？

（一）变量和函数的定义

在传统的script里，我们要在data函数里返回对象来定义组件的数据，方法呢就直接写在export default的对象里面，像这样：

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

但是在script setup里，就简单多啦，直接在script setup标签里定义变量就行，变量会自动变成响应式的哦（如果用了像ref或者reactive这些响应式的API），函数也直接定义在里面就行啦，

<script setup>
import { ref } from 'vue';
const count = ref(0);
const increment = () => {
  count.value++;
};
</script>

（二）组件的使用

在传统script里，如果要使用其他组件，得先在components选项里注册一下哦，就像这样：

<script>
import OtherComponent from './OtherComponent.vue';
export default {
  components: {
    OtherComponent
  },
  // 其他代码
};
</script>

而在script setup里呢，直接引入组件就可以在template里用啦，不用额外注册哦。

<script setup>
import OtherComponent from './OtherComponent.vue';
</script>
<template>
  <div>
    <OtherComponent />
  </div>
</template>

（三）生命周期钩子

传统script里，我们是在export default的对象里按照固定的名字来写生命周期钩子，比如mounted、created等等。

<script>
export default {
  mounted() {
    // 这里写挂载后要做的事
  }
};
</script>

在script setup里呢，得从vue里引入对应的生命周期钩子函数来用哦，像这样：

<script setup>
import { onMounted } from 'vue';
onMounted(() => {
  // 这里写挂载后要做的事
});
</script>

性能方面有区别不？

从性能角度来说呀,script setup在某些情况下可能会有一点点优势哦，因为它的代码结构更简洁，在编译的时候可能会有更高效的处理，比如说，它能让Vue的编译器更清楚地知道哪些变量和函数是组件内部要用的，在做代码优化的时候就可以更有针对性啦。

不过呢,这种性能上的差异在一般的小型项目或者不太复杂的组件里可能不太明显哦，只有当项目规模很大，组件很多很复杂的时候，可能才会更明显地感受到script setup在性能优化方面潜在的好处呢。

啥时候该用script setup，啥时候用script嘞？

如果是刚开始学习Vue 3，可能传统的script会更容易理解一些，毕竟它和Vue 2的写法比较类似，有那种熟悉的感觉，而且如果要兼容一些老的代码库或者项目结构，可能也得用传统script。

但是呢,当你想要写更简洁、高效的组件代码，尤其是在开发新的Vue 3项目，而且不太需要考虑和老代码的兼容性问题的时候，那script setup可就是个很棒的选择啦，它能让你写起代码来速度更快，代码看起来也更清爽呢。

总的来说呀,这两种写法都有它们各自的用处，就看具体的项目需求和你自己的喜好啦，希望通过上面的介绍，能让你对Vue 3里的script setup和script的区别和用法有更清楚的了解哦。