這篇文章帶大家深入聊聊vue3專案中關於ref、toRef、toRefs的使用方法，希望對大家有幫助！
#ref 函數，可以把簡單資料型別包裹成響應式資料（複雜型別也可以），注意JS 中操作值的時候，需要加.value 屬性，模板中正常使用即可。
舉個例子：
<template>
<div>
<div>{{ name }}</div>
<button>修改数据</button>
</div></template><script>
import { ref } from 'vue'
export default {
name: 'App',
setup() {
const name = ref('初映')
const updateName = () => {
name.value = '初映CY的前说'
}
return { name, updateName }
},
}</script>
可看見寫法與reactive()一樣，不過是在js中書寫的時候需要額外加一個.value即可。 【相關推薦：vuejs影片教學、web前端開發】
<template>
<div>
<div>{{ data?.name }}</div>
<button>修改数据</button>
</div></template><script>
import { ref } from 'vue'
export default {
name: 'App',
setup() {
// 初始值是 null
const data = ref(null)
setTimeout(() => {
// 右边的对象可能是后端返回的
data.value = {
name: '初映',
}
}, 1000)
const updateName = () => {
data.value.name = 'CY'
}
return { data, updateName }
},
}</script>
toRef 函數的作用：轉換響應式物件中某個屬性為單獨響應式數據，並且轉換後的值和之前是關聯的（ref 函數也可以轉換，但值非關聯）。
先看下面這個範例：
<template>
<div>
<h2>name: {{ obj.name }} age: {{obj.age}}</h2>
<button>修改数据</button>
</div></template><script>
import { reactive } from 'vue'
export default {
name: 'App',
setup() {
const obj = reactive({
name: '初映',
age: 18,
address: '江西',
sex: '男',
})
const updateName = () => {
obj.name = '初映CY的前说'
}
return { obj, updateName }
},
}</script>
這樣寫也可以將資料進行更改成為響應式的數據，但是帶來了兩個問題：
#問題1：模板中都要使用obj. 進行取得數據，很麻煩。
問題 2：明明模板中只用到了 name 和 age，卻把整個 obj 進行了導出，沒必要，效能浪費。
<template>
<div>
<h2>name: {{ name }} </h2>
<button>修改数据</button>
</div></template><script>
import { reactive,toRef } from 'vue'
export default {
name: 'App',
setup() {
const obj = reactive({
name: '初映',
age: 18,
address: '江西',
sex: '男',
})
const name = toRef(obj, 'name')
const updateName = () => {
obj.name = '初映CY的前说'
}
return { name, updateName }
},
}</script>這樣把我們需要的資料放進return即可，節約了性能與在模板中的寫法，有點點了'按需導入'的意思
toRefs 函數的作用：轉換響應式物件中所有屬性為單獨響應式數據，並且轉換後的值和之前是關聯的。
<template>
<div>
<h2>{{ name }} {{ age }}</h2>
<button>修改数据</button>
</div></template><script>
import { reactive, toRefs } from 'vue'
export default {
name: 'App',
setup() {
const obj = reactive({
name: '初映',
age: 10,
})
const updateName = () => {
obj.name = '初映CY的前说'
obj.age = 18
}
return { ...toRefs(obj), updateName }
},
}</script>
toRefs將我們所有的響應式資料都進行return出去了，屆時直接用上資料名稱即可，記得加上…喔
據。話不多說,讓我們來學習下這三個方法怎麼用，以及與reactive的差別。
以上是一文聊聊vue3中的ref、toRef、toRefs的詳細內容。更多資訊請關注PHP中文網其他相關文章！
