- ref 定義普通數(shù)據(jù)類型的響應(yīng)式，獲取/修改數(shù)據(jù)需要.value，在模板中不需要.value可以直接使用
//引入ref
import {ref} from "vue";
export default {
setup(){
let num = ref(0)
console.log(num.value)
return {num}
}
}
- reactive定義復(fù)雜數(shù)據(jù)類型的響應(yīng)式，
//引入reactive
import {reactive} from "vue";
export default {
setup(){
let arr= reactive({
name:'tyy',
age:24,
heigh:165
})
return {arr}
}
}
- toRef():當(dāng)我們在模板中渲染數(shù)據(jù)時(shí)启妹，不希望用前綴的時(shí)候可以使用組合toRef()--- toRef()是函數(shù)训枢，轉(zhuǎn)換響應(yīng)式對象中某個(gè)屬性為單獨(dú)響應(yīng)式數(shù)據(jù)托修，并且值是關(guān)聯(lián)的
<template>
<div>
<div>姓名：{{name}}</div>
<div>年齡：{{age}}</div>
<button @click="btnArr">按鈕</button>
</div>
</template>
<script>
//引入toRef
import {toRef} from "vue";
export default {
setup(){
let arr = reactive({
name:'tyy',
age:24
})
let name = toRef(arr,'name')
let age = toRef(arr,'age')
let btnArr = () => {
arr.name = "唐園園"
arr.age = 23
}
return {name,age,btnArr}
}
}
</script>
- toRefs()---toRefs函數(shù)可定義轉(zhuǎn)換響應(yīng)式中所有屬性為響應(yīng)式數(shù)據(jù)，通常用于結(jié)構(gòu)reactive定義的對象恒界，轉(zhuǎn)換響應(yīng)式對象中所有屬性（部分也行）為單獨(dú)響應(yīng)式數(shù)據(jù)睦刃，對象成為普通對象，并且值是關(guān)聯(lián)的
<template>
<div>
<div>姓名：{{name}}</div>
<div>年齡：{{age}}</div>
<button @click="btnArr">按鈕</button>
</div>
</template>
<script>
//引入toRef
import {toRefs} from "vue";
export default {
setup(){
let arr = reactive({
name:'tyy',
age:24
})
//轉(zhuǎn)換
let {name,age} = toRefs(arr)
let btnArr = () => {
arr.name = "唐園園"
arr.age = 23
}
return {name,age,btnArr}
}
}
</script>
