ref 屬性除了能夠取得元素外，也可以使用 ref 函數，建立一個響應式數據，當資料值改變時，視圖會自動更新。
<script lang="ts" setup>
import { ref } from 'vue'
let str: string = ref('我是张三')
const chang = () => {
str.value = '我是钻石王老五'
console.log(str.value)
}
</script>
<template>
<div>
{{ str }}
<button type="button" @click="chang">修改值</button>
</div>
</template>檢查變數是否為一個被 ref 包裝過的對象，如果是傳回 true ，否則傳回 false。
import { ref, isRef, reactive } from 'vue'
let str: string = ref('我是张三')
let num: number = 1
let per = reactive({ name: '代码女神', work: '程序媛' })
console.log('strRes', isRef(str)) //true
console.log('numRes', isRef(num)) //false
console.log('perRes', isRef(per)) //false建立一個 ref 對象，其 value 值指向另一個對像中的某個屬性。
toRef(obj, key) 將物件中的某個值轉換為響應式數據，分為兩種情況：
toRef 定義原始非響應式數據，修改值時，原始資料和copy 資料都會變的，但是視圖不更新。
<script>
import { ref, isRef, toRef, reactive } from 'vue'
let obj = {
name: '姓名',
age: 18,
}
let name: string = toRef(obj, 'name')
const chang = () => {
obj.name = '钻石王老五'
name.value = '李四'
console.log(obj.name) // 李四
console.log('name', name) // 李四
}
//chang() //DOM挂载前调用
</script>
<template>
<div>
{{ obj.name }} ------- {{ name }}
<button type="button" @click="chang">修改值</button>
</div>
</template>注意：如果是在 DOM 掛載之前呼叫 chang 方法，改變數值，此時資料和視圖都會改變。
toRef 定義原始數據響應式數據，修改值時，原始數據，和 copy 數據都會改變，視圖也會更新。
<script>
import { ref, isRef, toRef, reactive } from 'vue'
let obj = reactive({
name: '姓名',
age: 18,
})
let name: string = toRef(obj, 'name')
const chang = () => {
obj.name = '钻石王老五'
name.value = '李四'
}
</script>
<template>
<div>
{{ obj.name }} ------- {{ name }}
<button type="button" @click="chang">修改值</button>
</div>
</template>最終值為 「李四」。
toRefs 用來解構 ref、reactive 包裹的響應式資料。接收一個物件作為參數，遍歷物件上的所有屬性，將物件上的所有屬性變成響應式資料。
let obj = reactive({
name: '姓名',
age: 18,
})
let { name, age } = toRefs(obj)
const chang = () => {
name.value = '钻石王老五'
age.value++
}
</script>
<template>
<div>
{{ name }} ------- {{ age }}
<button type="button" @click="chang">修改值</button>
</div>
</template>toRefs 解構資料時，如果某些參數作為可選參數，可選參數不存在時就會報錯，如：
let obj = reactive({
name: '姓名',
age: 18,
})
let { name, age, work } = toRefs(obj)
const chang = () => {
name.value = '钻石王老五'
age.value++
console.log('work', work.value)
work.value = '程序媛'
}此時可以使用toRef 解決此問題，使用toRef 解構物件某個屬性時，先檢查物件上是否存在該屬性，如果存在就繼承物件上的屬性值，如果不存在就會建立一個。
修改上邊的程式碼為：
let obj = reactive({
name: '姓名',
age: 18,
})
let { name, age } = toRefs(obj)
let work = toRef(obj, 'work')
const chang = () => {
name.value = '钻石王老五'
age.value++
console.log('work', work.value)
work.value = '程序媛'
}將響應式物件轉為原始物件。做一些不想被監聽的事情，從 ref 或 reactive 得到原始資料。
修改原響應式資料時，toRaw 轉換得到的資料會被修改，檢視也會更新，如：
<script lang="ts" setup>
import { ref, isRef, toRef, toRefs, reactive, toRaw } from 'vue'
let obj = reactive({
name: '姓名',
age: 18,
})
let newObj = toRaw(obj)
const chang = () => {
obj.name = '钻石王老五'
obj.age++
}
</script>
<template>
<div>
{{ obj.name }} ------- {{ obj.age }}
<button type="button" @click="chang">修改值</button>
<br />
{{ newObj }}
</div>
</template>如果修改toRaw 得到的原始數據，原始資料也會被修改，但是視圖不更新。如：
<script lang="ts" setup>
import { ref, isRef, toRef, toRefs, reactive, toRaw } from 'vue'
let obj = reactive({
name: '姓名',
age: 18,
})
let newObj = toRaw(obj)
const chang = () => {
obj.name = '钻石王老五'
obj.age++
}
const changNew = () => {
newObj.name = '搞笑'
console.log('newObj', newObj)
console.log('obj', obj)
}
</script>
<template>
<div>
{{ obj.name }} ------- {{ obj.age }}
<button type="button" @click="chang">修改值</button>
<br />
{{ newObj }}
<button @click="changNew">修改</button>
</div>
</template>以上是vue3的ref、isRef、toRef、toRefs、toRaw怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
