vue3中的＜ script setup＞和＜ script＞ setup()有什么区别？

vue3中的< script setup>和< script> setup()有什么区别？

我一开始学vue3学的是 setup()这种写法的知道我在学uni-app的时候，我发现我使用setup()这种老传统的写法它报错，我一直找不到原因是什么，所以我只能去学习< script setup> 这种写法。知道我看了这篇文章https://juejin.cn/post/7078865301856583717#heading-8 非常棒。虽然不是很懂但是我实践了以下，证明了我的猜测，事实上我猜对了。如果看不懂这文章，可以看下面的实践。

先看看< script> setup()这种的写法

<template>
	<div>
		{{name}}//显示为李华
        <button @click="fun">点我</button>//点击时会改变name的值  显示为 ‘张三’	
    </div>
</template>

<script>
    import {toRefs,reactive} from 'vue'
	export default {
        setup(){
            //定义数据域
            const data = reactive({
                name:'李华',
                age:23
            })
            //方法区begin
            const fun =()=>{
                data.name = "张三"
                console.log(data.name)//在打印结果为  张三
            }
            //end
            return {
                ...toRefs(data),fun
            }
        }
	}
</script>

写完这个你就会发现，你是不是要先写 import {toRefs,reactive} from ‘vue’ 然后写 export default { } ，里面还得写 setup()、数据域、方法区 、和 return { …toRefs(data),fun } 。每次新建一个文件都要写一次，或者复制一次。是不是觉得太费事了？对的，就是。

我们再看< script setup> 这种怎么写。

<template>
	<view class="content">
		<view class="text-area">
			<text class="title">{{title}}</text>
			<text> {{user.name}}</text>
		</view>
		<button @click="change(user)">点我</button>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"

	const title = ref("hello  -- uniapp")
	const user = reactive({
		name:'李华',
		age: 23,
		gender: "男"
	})
	
	const change=(user)=>{
		user.name = "张三"
		// console.log(user);结果是张三
	}
</script>

发现了什么吗？这里我写了< script setup> ，除此之外，我还写了什么？你会发现，我没写export default { }
setup(){} 还有return { }。因为在 < script setup> 里面直接就能用。不需要return 去定义，去暴露。看看这个再结合上面的文章就很容易理解了。