Vue3 toRef 和 toRefs 函數

上一篇博文介紹了 vue3 裡面的 ref 函數和 reactive 函數，實現響應式資料，今天主要來說一下 toRef 函數和 toRefs 函數的基本使用。

toRef 函數

通過上一篇部落格，我們知道，ref 函數可以建立一個響應式的資料，那 toRef 函數同樣也是建立一個響應式的資料，那麼他們之間的區別是什麼呢？

首先一點，ref 函數他的本質其實是去拷貝一份資料，脫離了與源資料的互動。什麼意思呢？就是 ref 函數可以將物件裡面的屬性值變成響應式的資料，修改響應式資料，是不會影響到源資料，但是檢視層上的資料會被更新。但是 toRefs 函數的本質是參照，也就是說，toRef 函數會與源資料互動，修改響應式資料會造成源資料的修改，但是他的修改不會造成檢視層資料的更新。

上面這段話理解嗎？不理解的話沒關係，下面通過幾個案例就可以明白了。

toRef 函數使用

首先呢， toRef 函數有兩個引數。

toRef(操作物件, 物件屬性)

好，接下來我們使用 toRef 函數寫一個案例，還是和以前一樣，頁面展示一個使用者的名稱和年紀。

<template>
  <div>
    <h1>toRef toRefs 函數</h1>
    <p>姓名：{{boy_toRef}}</p>
    <p>年齡：{{boy.age}}</p>
  </div>
</template>
<script>
  import { toRef } from 'vue'
  export default {
    setup() {
      const boy = {   // 建立一個使用者物件
        name: '我是