【Vue3】常用的响应式数据类型

ref

• 定义基本类型

<template><div>{{ sum }}</div>
</template><script setup>
import { ref } from 'vue'let sum = ref(10)const btn = () => {sum.value = 200
}
</srcipt>

reactive

• 定义复杂类型

<template><div>{{ sum }}<hr />{{ obj }}</div>
</template><script setup>
import { ref, reactive } from 'vue'let sum = ref(10)
let obj = reactive({name: '小公主',age: 18,sex: '女'
})const btn = () => {sum.value = 200obj.name = '仙女'
}
</srcipt>

toRef

• 解构某一个值

<template><div>{{ sum }}<hr />{{ obj }}<hr />{{ name }}</div>
</template><script setup>
import { ref, reactive, toRef } from 'vue'let sum = ref(10)
let obj = reactive({name: '小公主',age: 18,sex: '女'
})
let name = toRef()const btn = () => {sum.value = 200obj.name = '仙女'
}
</srcipt>

toRefs

• 解构多个值

<template><div>{{ sum }}<hr />{{ obj }}<hr />{{ name }}</div>
</template><script setup>
import { ref, reactive, toRef, toRefs } from 'vue'let sum = ref(10)
let obj = reactive({name: '小公主',age: 18,sex: '女'
})
let name = toRef()const btn = () => {sum.value = 200obj.name = '仙女'
}
</srcipt>