Vue3中ref、toRef、toRefs的區別

首先要注意要一點：ref、toRef、toRefs 都是composition API

通常在生命週期函數 setup 中使用

setup 會比 options API 的生命週期函數 beforeCreate 更先執行

1.ref的使用

ref 是 vue3 中使用值類型變成響應式的方法

使用 ref.value = xx 進行改變值

例如，下面簡單的例子

1.5秒後 nameRef 的值從 ayuan 變爲 ayuan2（模版template的值也會更新）

<template>
  <div>
    {{ nameRef }}
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  setup() {
  
    const nameRef = ref('ayuan')
    
    // 1.5秒後 nameRef的值從 ayuan 變爲 ayuan2
    setTimeout(() => {
      nameRef.value = 'ayuan2'
    }, 1500)
    
    // 返回的值能夠在 template 中使用
    return {
      nameRef
    }
  }
}
</script>
複製代碼

代碼效果：

2.reactive的用

好了，說完值類型變成響應式的方法，

對應的，有用引用類型變成響應式的方法

就是使用 reactive

例子：1.5 秒後 person.age 的值從 50 變爲 51（模版template的值也會更新）

<template>
  <div>
    {{ person.name }}
    <br />
    {{ person.age }}
  </div>
</template>

<script>
import { reactive } from 'vue'
export default {
  setup() {

    const person = reactive({
      name: 'ayuan',
      age: 50
    })

    // 1.5 秒後 person.age 的值從 50 變爲 51
    setTimeout(() => {
      person.age = 51
    }, 1500)

    return {
      person
    }
  }
}
</script>
複製代碼

代碼效果：

3.toRef的使用

toRef 是對定義的響應對象的某個屬性進行引用

例如：第二個例子中的

const nameRef = toRef(person, 'name')
複製代碼

可是其實你會發現，我使用nameRef和 person.name 進行賦值都會觸發響應式

那 toRefs 是否是沒用？

固然不是！

在你使用一個函數返回一個響應式對象

而此定義的「響應式對象」卻失去了響應式

而這時候就能夠使用的 toRef 或是 toRefs 保持他的響應式

咱們先說 toRef

舉個🌰：

先看目錄結構

data.js 中的代碼

import { reactive } from 'vue'

export default function () {
    return reactive({
        name: 'ayuan',
        age: 50
    })
}
複製代碼

App.vue 中的代碼

<template>
  <div>
    {{ nameRef }}
  </div>
</template>

<script>
import { toRef } from 'vue'
import data from './data'
export default {
  setup() {
    const nameRef = toRef(data(), 'name')
    
    setTimeout(() => {
      nameRef.value = 'ayuan2'
    }, 1000)
    
    return {
      nameRef
    }
  }
}
</script>
複製代碼

代碼效果：

好的，這下你就明白了：這其實就是對響應對象的一種「延續」

或許，你會以爲，data.js 文件返回響應式對象一個個的延續很複雜啊

那麼就使用 toRefs

4.toRefs的使用

咱們只須要稍微改造一下 data.js 中的代碼

// data.js
import { reactive, toRefs } from 'vue'

export default function () {
    const person = reactive({
        name: 'ayuan',
        age: 50
    })
    
    return toRefs(person)
}

複製代碼

App.vue 中的代碼

<template>
  <div>
    {{ name }}
    <br />
    {{ age }}
  </div>
</template>

<script>
import data from './data'
export default {
  setup() {
    const person = data()
    
    setTimeout(() => {
      person.name.value = 'ayuan2'
      person.age.value = 51
    }, 1000)
    
    // 直接寫 return person 也行
    return {
      ...person
    }
  }
}
</script>
複製代碼

代碼效果：

5.總結

這樣看下來，你就明白了：

ref 是對值類型創造響應式的方法

toRef、toRefs 是延續引用類型響應式對象的方法

只不過 toRef 延續單個響應式對象的屬性,

而 toRefs 延續響應式對象的所有屬性

感謝閱讀