在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>