script setup 是什么意思?
<script setup lang="ts">
由于本人是后端开发者,前端的开发一直停留在Vue
舒适区,第一次看到这行代码,人一下子呆住了,但是好在内部的代码并不是很难,所以就没管这个问题了。但是有问题一直拖着不是好事,于是我问了问我亲爱的GPT老师
。
GPT老师的回答:
-
简化的
<script>
区块:<script setup>
可以代替传统的<script>
区块,让你在组件中更轻松地编写响应式数据、计算属性、方法等代码。 -
自动推断类型:使用 TypeScript 时,
<script setup>
可以自动推断变量和属性的类型,无需显式声明类型。
- 传统方式:
<script> export default { data() { return { count: 0 } } } </script>
- 该方式
<script setup> let count = 0 </script>
- 无需
return
:你不需要使用return
关键字来返回组件选项,<script setup>
会自动返回响应式对象。
- 传统方式:
<script> export default { data() { return { message: 'Hello, Vue 3' } } } </script>
- 该方式
<script setup> const message = 'Hello, Vue 3' </script>
- 无需
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>
- 无需
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>
- 组件模板中的变量直接可用:在模板中,你可以直接访问组件
<script setup>
部分中声明的变量,无需额外的声明。
非常好,GPT老师给出的答案对于现在的我来说这些点够用了,虽然不够深入,但是边开发边学嘛,不可能一步到底的,所以之后还有更深入的内容再来补充咯。