初学vue3与ts：setup与setup()下的数据写法

把setup写在script里

<template>
	<div>
		<div class="index-title">script setup</div>
		<div class="title">字符串：</div>
		<div class="title-sub">ref版：{{strRef}}</div>
		<div class="title-sub">ref版模板字符串：{{strRefTem}}</div>
		<div class="title-sub">reactive版：{{strReactive.str}}</div>
		<div class="title-sub">reactive版模板字符串：{{strReactiveTem.str}}</div>
		<div class="title">数字：</div>
		<div class="title-sub">ref版：{{numRef}}</div>
		<div class="title-sub">reactive版：{{numReactive.num}}</div>
		<div class="title">布尔：</div>
		<div class="title-sub">ref版：{{booRef}}</div>
		<div class="title-sub">reactive版：{{booReactive.boo}}</div>
		<div class="title">数组：</div>
		<div class="title-sub flex">
			<div>ref版：</div>
			<div v-for="(item,index) in arrRef" :key="index">{{item}}</div>
		</div>
		<div class="title-sub flex">
			<div>reactive版：</div>
			<div v-for="(item,index) in arrReactive.arr" :key="index">{{item}}</div>
		</div>
		<div class="title">用any定义一个定时器，10s后停止：</div>
		<div class="title-sub">{{timeTam}}s</div>
		<div class="title">对象：</div>
		<div class="title-sub">ref版：name:{{objRef.name}},age:{{objRef.age}}</div>
		<div class="title-sub">reactive版：name:{{objReactive.name}},age:{{objReactive.age}}</div>
	</div>
</template>

<script setup lang="ts">
	import { ref, reactive } from 'vue' //引入，不要问为什么
	// 字符串
	// ref版 也可以用 ref<string>('我是ref版')
	const strRef = ref('我是ref版')
	// ref版-模板字符串
	const title = '你好，'
	const strRefTem = ref(`${title}我是模板字符串`)
	// reactive版
	const strReactive = reactive({
		str:'我是reactive版'
	})
	// reactive版-模板字符串
	const strReactiveTem = reactive({
		str:`${strRef.value}-模板字符串`
	})
	// 字符串重新赋值
	setTimeout(()=>{
		strRef.value = '我是ref版-2s后'
		strReactive.str = '我是reactive版-2s后'
	},2000)
	
	// 数字
	// ref版 也可以用 ref<number>(100)
	const numRef = ref(100)
	// reactive版
	const numReactive = reactive({
		num:100
	})
	
	// 布尔
	// ref版 也可以用 ref<boolean>(false)
	const booRef = ref(false)
	// reactive版
	const booReactive = reactive({
		boo:true
	})
	
	// 数组
	// ref版 也可以用 ref<object[]>([1,2,3,4])
	const arrRef = ref(['我','是','数','组'])
	// reactive版
	const arrReactive = reactive({
		arr:['上','面','说','的','没','错']
	})
	
	// 不限制类型
	const time = ref<any>(null)
	const timeTam = ref(0)
	time.value = setInterval(()=>{
		timeTam.value++;
	},1000)
	setTimeout(()=>{
		clearInterval(time.value)
	},10000)
	
	// 对象
	const objRef = ref({name:'林',age:18})
	// reactive版
	const objReactive = reactive({
		name:'吴',
		age:11
	})

	//定义一个值，类型可能为number或者null
	const keyMore = ref<number | null>(null);
	// reactive版
	interface State {
	  num: number | null;
	}
	const keyMoreReactive = reactive<State >({num:null})
</script>

<style>
	.index-title{
		font-size: 24px;
		font-weight: bold;
	}
	.title{
		font-weight: bold;
		font-size: 20px;
		padding-top: 20px;
		padding-left: 20px;
	}
	.title-sub{
		padding-left: 40px;
		margin-top: 10px;
	}
	.flex{
		display: flex;
		align-items: center;
	}
</style>

在script里用setup()

<template>
	<div>
		<div class="index-title">script setup()</div>
		<div class="title">字符串：</div>
		<div class="title-sub">ref版：{{strRef}}</div>
		<div class="title-sub">ref版模板字符串：{{strRefTem}}</div>
		<div class="title-sub">reactive版：{{strReactive.str}}</div>
		<div class="title-sub">reactive版模板字符串：{{strReactiveTem.str}}</div>
		<div class="title">数字：</div>
		<div class="title-sub">ref版：{{numRef}}</div>
		<div class="title-sub">reactive版：{{numReactive.num}}</div>
		<div class="title">布尔：</div>
		<div class="title-sub">ref版：{{booRef}}</div>
		<div class="title-sub">reactive版：{{booReactive.boo}}</div>
		<div class="title">数组：</div>
		<div class="title-sub flex">
			<div>ref版：</div>
			<div v-for="(item,index) in arrRef" :key="index">{{item}}</div>
		</div>
		<div class="title-sub flex">
			<div>reactive版：</div>
			<div v-for="(item,index) in arrReactive.arr" :key="index">{{item}}</div>
		</div>
		<div class="title">用any定义一个定时器，10s后停止：</div>
		<div class="title-sub">{{timeTam}}s</div>
		<div class="title">对象：</div>
		<div class="title-sub">ref版：name:{{objRef.name}},age:{{objRef.age}}</div>
		<div class="title-sub">reactive版：name:{{objReactive.name}},age:{{objReactive.age}}</div>
	</div>
</template>

<script lang="ts">
	import { defineComponent, ref, reactive } from 'vue' //引入，不要问为什么
	export default defineComponent({
		setup() {
			// 字符串
			// ref版 也可以用 ref<string>('我是ref版')
			const strRef = ref('我是ref版')
			// ref版-模板字符串
			const title = '你好，'
			const strRefTem = ref(`${title}我是模板字符串`)
			// reactive版
			const strReactive = reactive({
				str:'我是reactive版'
			})
			// reactive版-模板字符串
			const strReactiveTem = reactive({
				str:`${strRef.value}-模板字符串`
			})
			// 字符串重新赋值
			setTimeout(()=>{
				strRef.value = '我是ref版-2s后'
				strReactive.str = '我是reactive版-2s后'
			},2000)
			
			// 数字
			// ref版 也可以用 ref<number>(100)
			const numRef = ref(100)
			// reactive版
			const numReactive = reactive({
				num:100
			})
			
			// 布尔
			// ref版 也可以用 ref<boolean>(false)
			const booRef = ref(false)
			// reactive版
			const booReactive = reactive({
				boo:true
			})
			
			// 数组
			// ref版 也可以用 ref<object[]>([1,2,3,4])
			const arrRef = ref(['我','是','数','组'])
			// reactive版
			const arrReactive = reactive({
				arr:['上','面','说','的','没','错']
			})
			
			// 不限制类型
			const time = ref<any>(null)
			const timeTam = ref(0)
			time.value = setInterval(()=>{
				timeTam.value++;
			},1000)
			setTimeout(()=>{
				clearInterval(time.value)
			},10000)
			
			// 对象
			const objRef = ref({name:'林',age:18})
			// reactive版
			const objReactive = reactive({
				name:'吴',
				age:11
			})
			//定义一个值，类型可能为number或者null
			const keyMore = ref<number | null>(null);
			// reactive版
			interface State {
			  num: number | null;
			}
			const keyMoreReactive = reactive<State >({num:null})
			return{
				strRef,
				strRefTem,
				strReactive,
				strReactiveTem,
				numRef,
				numReactive,
				booRef,
				booReactive,
				arrRef,
				arrReactive,
				time,
				timeTam,
				objRef,
				objReactive,
				keyMore,
				keyMoreReactive
			}
		}
	})
</script>

<style>
	.index-title{
		font-size: 24px;
		font-weight: bold;
	}
	.title{
		font-weight: bold;
		font-size: 20px;
		padding-top: 20px;
		padding-left: 20px;
	}
	.title-sub{
		padding-left: 40px;
		margin-top: 10px;
	}
	.flex{
		display: flex;
		align-items: center;
	}
</style>

从上面的代码来看，setup比setup()方便的多，毕竟少了return，其他地方没什么改变，都一样