vue3 組合式API

ref

ref()接收一個值，返回一個響應式、可更改的ref對象

const count = ref(0)
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

 

toRef

不使用toRef，舉例如下：

import { reactive } from 'vue'
let data = reactive({
  name: 'Sasa',
  age: 16
})
let age2 = data.age
data.age++
console.log(age2) // 16
console.log(data.age) // 17

直接獲取響應式對象中的屬性，會使新屬性失去響應性

下面使用toRef重寫例子：

import { reactive, toRef } from 'vue'
let data = reactive({
  name: 'Sasa',
  age: 16
})
let age = toRef(data, 'age')
data.age++
console.log(age.value) // 17
console.log(data.age) // 17

使用toRef獲取響應式對象中一個屬性，會創建一個對應的ref，與響應式對象中的源屬性，保持同步

 

toRefs

toRef是基於響應式對象中的一個屬性，toRefs是對整個響應式對象。使用toRefs將一個響應式對象轉爲一個普通對象，普通對象的每個屬性都是使用toRef創建的ref，指向源屬性

使用 toRefs 可以將 reactive 類型 裝換爲 ref 單個值類型，並且解構不會丟失響應式

import { reactive, toRefs } from 'vue'

let data = reactive({
  name: 'Sasa',
  age: 16
})
let dataRefs = toRefs(data)
data.age++
console.log(dataRefs.age.value) // 17
console.log(data.age) // 17

比如操作props，因爲props是響應式的，他不能使用ES6解構，會消除prop的響應性。當父組件下次更改值的時候，子組件無法響應

import { toRefs } from 'vue'

const props = defineProps({
  msg: {
    type: String
  }
})
let { msg } = toRefs(props)

總結：不管使用toRef還是toRefs創建的新屬性，都是和源屬性保持着關聯

 

computed

接收一個getter函數，返回一個只讀的響應式ref對象，通過.value 暴露返回值

也可以接收一個帶有get和set函數的對象來創建一個可寫的ref對象

• 創建一個只讀的計算屬性ref

import { computed, ref } from 'vue'

const count = ref(1)
const getCount = computed(() => count.value)
console.log(getCount.value) // 1
getCount.value++ // 修改：Write operation failed: computed value is readonly

• 創建一個可寫的計算屬性ref：

import { computed, ref } from 'vue'

const count = ref(1)
const getCount = computed({
  get: () => count.value,
  set: (val) => {
    count.value = val
  }
})
console.log(getCount.value) // 1
getCount.value = 2 // 可以修改
console.log(getCount.value) // 2