vue3.0 ref、reactive

在vue3.0中跟vue2.0相比很多写法都变了
以前声明变量在data中就行了
现在声明要用到ref和reactive

这里声明了page 和setData 两个变量
最简单的解释就是ref声明单一简单的变量 reactive 声明复杂的变量
但是要想用到这两种变量必须要return 出来 方法名也必须return
ref，reactive 是有双向绑定的功能

<template>
	<div>
		<div>{{page}}</div>
		<p>{{setData.age}}</p>
		<button @click="btn">按钮</button>
	</div>
</template>
<script>
import {ref,reactive} from 'vue'
export default defineComponent({
	name:'dome',
	setup(){
		const page = ref(1)
		const setData = reactive({
			age:17,
			name:'张三'	
		})
		function btn(){
			//要改变ref的变量 必须要用value 否则拿不到值
			page.value = 2
			//要改变reactive的变量没有value
			setData.age=20
			setData.name = '六四'
		}
		return {
			page,
			setData,
			btn
		}
	}
})
</script>

上面的写法感觉很不舒服因为当变量多了我下面都要return出来感觉写的东西就好多了
所以出现了语法糖

语法糖就写的很简单了 在script中写到setup
这样就不用写到setup函数了
定义的变量和方法都不用再return中再写一次了可以直接调用

<template>
	<div>
		<div>{{page}}</div>
		<p>{{setData.age}}</p>
		<button @click="btn">按钮</button>
	</div>
</template>
<script setup>
import {ref,reactive} from 'vue'
const page = ref(1)
const setData = reactive({
	age:17,
	name:'张三'	
})
function btn(){
	//要改变ref的变量 必须要用value 否则拿不到值
	page.value = 2
	//要改变reactive的变量没有value
	setData.age=20
	setData.name = '六四'
}

</script>