首先呢， toRef 函式有兩個參數。
toRef(操作物件, 物件屬性)
好，接下來我們使用toRef 函數寫一個案例，還是和以前一樣，頁面展示一個使用者的名稱和年紀。
<template>
<div>
<h2>toRef toRefs 函数</h2>
<p>姓名：{{boy_toRef}}</p>
<p>年龄：{{boy.age}}</p>
</div>
</template>
<script>
import { toRef } from 'vue'
export default {
setup() {
const boy = { // 创建一个用户对象
name: '我是????????.', // 用户名称
age: 10 // 用户年龄
}
// 使用 toRef 函数包裹，操作 boy 对象的 name 属性
const boy_toRef = toRef(boy, 'name')
console.log(boy_toRef) // 我们直接打印看一下包裹后的数据格式
return { boy, boy_toRef }
}
}
</script>儲存程式碼，重新整理頁面。
我們可以看到資料的結構，在value 裡面直接就是boy 下面name 的屬性值，所以說，接下來我們寫一個按鈕，點擊按鈕，修改這個name 值。
<template>
<div>
<h2>toRef toRefs 函数</h2>
<p>姓名：{{boy_toRef}}</p>
<p>年龄：{{boy.age}}</p>
<el-button type="primary" @click="btn">修改 name</el-button>
</div>
</template>
<script>
import { toRef } from 'vue'
export default {
setup() {
const boy = {
name: '我是????????.',
age: 10
}
// 这个 boy_toRef 就是被 toRef 函数操作过的 boy 的 name 值
const boy_toRef = toRef(boy, 'name')
const btn = () => {
boy_toRef.value = '????????.' // 把 name 修改成 ????????.
console.log(boy_toRef) // 修改完成打印一下结果
}
return { boy, btn, boy_toRef }
}
}
</script>儲存程式碼刷新頁面，然後點擊按鈕看一下頁面效果。
透過截圖展示的效果我們可以發現，boy_toRef 的值確實被修改了，但是呢，頁面並沒有改變，而且頁面也沒有出現錯誤。
這是什麼原因呢？其實這不是Bug 哈，在本篇博文開始就說過，toRef 函數會與源數據交互，修改響應式數據會造成源數據的修改，但是他的修改不會造成視圖層數據的更新，所以說，這就是toRef 函數的功能。確實，視圖沒有資料更新我們透過上面的截圖看到了，但是來源資料修改這個怎麼看呢？沒關係，在回答這個問題之前，我們首先得知道，什麼是來源資料。
就像上面的程式碼：
const boy = {
name: '我是????????.',
age: 10
}
const boy_toRef = toRef(boy, 'name')toRef 函數將 boy 物件給包裹了起來，所以說，boy 物件就是來源資料。
因此，若想確認原始資料是否已更改，需在按鈕點擊後列印boy物件並觀察是否已更改。
<template>
<div>
<h2>toRef toRefs 函数</h2>
<p>姓名：{{boy_toRef}}</p>
<p>年龄：{{boy.age}}</p>
<el-button type="primary" @click="btn">修改 name</el-button>
</div>
</template>
<script>
import { toRef } from 'vue'
export default {
setup() {
const boy = {
name: '我是????????.',
age: 10
}
const boy_toRef = toRef(boy, 'name') // 这个 boy_toRef 就是被 toRef 函数操作过的 boy 的 name 值
const btn = () => {
boy_toRef.value = '????????.' // 把 name 修改成 ????????.
console.log(boy_toRef) // 修改完成打印一下结果
console.log(boy) // 修改完成打印一下boy结果
}
return { boy, btn, boy_toRef }
}
}
</script>儲存程式碼，刷新頁面，在點擊按鈕修改 name 值，然後查看控制台列印的 boy 物件。
發現boy 物件的name 值已經從 我是????????. 改為 ????? ???.了，但是頁面依舊沒有更新。
記住了！
toRef 函數會與來源資料交互，修改響應式資料會造成來源資料的修改，但是他的修改不會造成視圖層資料的更新。
那 ref 函數可以將物件裡面的屬性值變成響應式的數據，修改響應式數據，是不會影響到來源數據，但視圖層上的資料會更新 這句話是正確的嘛？上一節我們沒測試，所以說在這裡我們也測試一下。
我們還是寫一個案例，頁面展示一個名稱，點選按鈕，修改頁面名稱。
<template>
<div>
<h2>ref reactive 函数</h2>
<p>姓名：{{name_ref}}</p>
<el-button type="primary" @click="btn">修改信息</el-button>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const name = '我是????????.'
const name_ref = ref(name)
const btn = () => {
name_ref.value = '????????.'
console.log(name_ref) // 打印一下被ref包裹的数据
console.log(name) // 打印一下源数据
}
return { name_ref, btn }
}
}
</script>儲存程式碼，刷新頁面，點擊按鈕查看頁面控制台列印的結果，主要是看一下被ref 函數包裹後的資料有沒有修改成功，來源資料有沒有修改成功，最後頁面有沒有修改，下面看截圖。
#OK，透過上面截圖，顧忌大家都理解了吧！
所以再記得！
ref 函數可以將物件裡面的屬性值變成響應式的數據，修改響應式數據，是不會影響到來源數據，但視圖層上的數據會被更新
toRefs 函數的使用呢，其實和toRef 函數類似的哈。
toRefs 函數用於批次設定多個資料為對應是資料。
toRefs 函數與原始資料相交互，修改響應式資料會影響到來源數據，但不會更新視圖層。
toRefs 函數還可以與其他響應式資料相交互，更方便處理視圖層資料。
老樣子，建立一個對象，然後使用 toRefs 函數包裹，在頁面展示一下。
<template>
<div>
<h2>toRef toRefs 函数</h2>
<p>姓名：{{boy_toRefs.name}}</p>
<p>年龄：{{boy_toRefs.age}}</p>
</div>
</template>
<script>
import { toRefs } from 'vue'
export default {
setup() {
const boy = {
name: '我是????????.',
age: 10
}
const boy_toRefs = toRefs(boy) // 将 boy 用 toRefs 包裹
console.log(boy_toRefs) // 打印一下结果
return { boy_toRefs }
}
}
</script>儲存程式碼，刷新頁面查看。
所以說，我們修改修改一下程式碼，在渲染的時候除了 .屬性 之外，還需要 .value。
<p>姓名：{{boy_toRefs.name.value}}</p>
<p>年龄：{{boy_toRefs.age.value}}</p>把視圖層程式碼修改一下，然後查看效果。
誒，現在就是正常的啦！
有人可能會疑問，那這玩意兒整的不是越來越複雜了嗎？本來直接點屬性就可以，現在還要點屬性點value，不是多此一舉，脫褲子放P嗎？嘿嘿嘿！我覺得也是。
為什麼呢說是多此一舉也很正常，因為前面的博文講過，這種複雜結構資料我們完全可以使用reactive 函數來處理呀，渲染最多點一次就可以，但是toRefs 函數卻需要點兩次。
<template>
<div>
<h2>toRef toRefs 函数</h2>
<p>姓名：{{boy_toRefs.name}}</p>
<p>年龄：{{boy_toRefs.age}}</p>
</div>
</template>
<script>
import { toRefs, reactive } from 'vue'
export default {
setup() {
const boy = {
name: '我是????????.',
age: 10
}
const boy_toRefs = reactive(boy)
return { boy_toRefs }
}
}
</script>我们不使用 toRefs 函数，而是用之前说的 reactive 函数处理数据。
我们可以看到，页面是可以正常解析的，那为什么我们还有舍近求远的使用 toRefs 函数呢？
其实是有原因的呀！
其实 toRefs 函数最大的用处在这里！
我们这个 boy 对象里面只有两个参数比较少，如果我们这个对象里面有十个参数或者是更多的话，每次展示的时候都得写那么多遍的 boy 点，是不是很麻烦呢？所以说使用 toRefs 函数就可以解决这个问题，看下面的代码。
<template>
<div>
<h2>toRef toRefs 函数</h2>
<p>姓名：{{name}}</p>
<p>年龄：{{age}}</p>
</div>
</template>
<script>
import { toRefs } from 'vue'
export default {
setup() {
const boy = {
name: '我是????????.',
age: 10
}
return { boy_toRefs , ...toRefs(boy)}
}
}
</script>在 return 抛出 reactive 的时候，使用扩展运算符和 toRefs 函数，就可以实现直接写属性的方式展示数据了。
但是呢，深层次的对象依旧需要通过点来实现。
也许你还有疑问，直接扩展运算 reactive 函数也行啊，为啥要套上 toRefs 函数，记住一点呀！
toRefs 函数修改，原始数据被改变，页面不会被触发。
看下面代码：
<template>
<div>
<h2>toRef toRefs 函数</h2>
<p>姓名：{{name}}</p>
<p>年龄：{{age}}</p>
<el-button type="primary" @click="btn">修改 name</el-button>
</div>
</template>
<script>
import { toRefs, reactive } from 'vue'
export default {
setup() {
const boy = {
name: '我是????????.',
age: 10
}
const new_toRefs = toRefs(boy)
const btn = () => {
new_toRefs.name.value = '????????.'
console.log(boy)
}
return { btn, ...toRefs(boy) }
}
}
</script>打印一下结果：
从打印结果中可以看出，原始数据被改变，页面没有被触发。根据我的写法，可以发现，从解构或构建 toRefs 返回的对象，都不会对值的响应性产生影响。
以上是Vue3中toRef和toRefs函數怎麼使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
