快捷導(dǎo)航

vue3響應(yīng)式轉(zhuǎn)換常用API操作示例代碼

更新時間：2024年08月03日 09:36:27 作者：今天你有學(xué)習(xí)嗎

在Vue 3中,響應(yīng)式系統(tǒng)得到了顯著改善,包括使用Composition API時更加靈活的狀態(tài)管理,這篇文章主要介紹了vue3響應(yīng)式轉(zhuǎn)換常用API操作示例代碼,需要的朋友可以參考下

響應(yīng)式常用API

ref 相關(guān)：toRef、toRefs、unRef
只讀代理：readonly
判斷相關(guān)：isRef、isReactive、isProxy、isReadonly
3.3新增API：toValue

ref相關(guān)

toRef：基于響應(yīng)式對象的某一個屬性，將其轉(zhuǎn)換為 ref 值

import { reactive, toRef } from 'vue'
const state = reactive({
  count: 0
})
const countRef = toRef(state, 'count')
// 這里其實就等價于 ref(state.count)
console.log(countRef)
console.log(countRef.value)

import { reactive, isReactive, toRef } from 'vue'
const state = reactive({
  count: {
    value: 0
  }
})
console.log(isReactive(state)) // true
console.log(isReactive(state.count)) // true
const countRef = toRef(state, 'count')
// 相當(dāng)于 ref(state.count)
console.log(countRef)
console.log(countRef.value)
console.log(countRef.value.value)

toRefs：將一個響應(yīng)式對象轉(zhuǎn)為一個普通對象，普通對象的每一個屬性對應(yīng)的是一個 ref 值

import { reactive, toRefs } from 'vue'
const state = reactive({
  count: 0,
  message: 'hello'
})
const stateRefs = toRefs(state)
console.log(stateRefs) // {count: RefImpl, message: RefImpl}
console.log(stateRefs.count.value)
console.log(stateRefs.message.value)

unRef: 如果參數(shù)給的是一個 ref 值，那么就返回內(nèi)部的值，如果不是 ref，那么就返回參數(shù)本身

這個 API 實際上是一個語法糖： val = isRef(val) ? val.value : val

import { ref, unref } from 'vue'
const countRef = ref(10)
const normalValue = 20
console.log(unref(countRef)) // 10
console.log(unref(normalValue)) // 20

只讀代理

接收一個對象（不論是響應(yīng)式的還是普通的）或者一個 ref，返回一個原來值的只讀代理。

import { ref, readonly } from 'vue'
const count = ref(0)
const count2 = readonly(count) // 相當(dāng)于創(chuàng)建了一個 count 的只讀版本
count.value++;
count2.value++; // 會給出警告

在某些場景下，我們就是希望一些數(shù)據(jù)只能讀取不能修改

const rawConfig = {
  apiEndpoint: 'https://api.example.com',
  timeout: 5000
};
// 例如在這個場景下，我們就期望這個配置對象是不能夠修改的
const config = readonly(rawConfig)

判斷相關(guān)

isRef 和 isReactive

import { ref, shallowRef, reactive, shallowReactive, isRef, isReactive } from 'vue'
const obj = {
  a:1,
  b:2,
  c: {
    d:3,
    e:4
  }
}
const state1 = ref(obj)
const state2 = shallowRef(obj)
const state3 = reactive(obj)
const state4 = shallowReactive(obj)
console.log(isRef(state1)) // true
console.log(isRef(state2)) // true
console.log(isRef(state1.value.c)) // false
console.log(isRef(state2.value.c)) // false
console.log(isReactive(state1.value.c)) // true
console.log(isReactive(state2.value.c)) // false
console.log(isReactive(state3)) // true
console.log(isReactive(state4)) // true
console.log(isReactive(state3.c)) // true
console.log(isReactive(state4.c)) // false

isProxy: 檢查一個對象是否由 reactive、readonly、shallowReactive、shallowReadonly 創(chuàng)建的代理

import { reactive, readonly, shallowReactive, shallowReadonly, isProxy } from 'vue'
// 創(chuàng)建 reactive 代理對象
const reactiveObject = reactive({ message: 'Hello' })
// 創(chuàng)建 readonly 代理對象
const readonlyObject = readonly({ message: 'Hello' })
// 創(chuàng)建 shallowReactive 代理對象
const shallowReactiveObject = shallowReactive({ message: 'Hello' })
// 創(chuàng)建 shallowReadonly 代理對象
const shallowReadonlyObject = shallowReadonly({ message: 'Hello' })
// 創(chuàng)建普通對象
const normalObject = { message: 'Hello' }
console.log(isProxy(reactiveObject)) // true
console.log(isProxy(readonlyObject)) // true
console.log(isProxy(shallowReactiveObject)) // true
console.log(isProxy(shallowReadonlyObject)) // true
console.log(isProxy(normalObject)) // false

3.3新增API

toValue

這個 API 和前面介紹的 unref 比較相似

import { ref, toValue } from 'vue'
const countRef = ref(10)
const normalValue = 20
console.log(toValue(countRef)) // 10
console.log(toValue(normalValue)) // 20

toValue 相比 unref 更加靈活一些，它支持傳入 getter 函數(shù)，并且返回函數(shù)的執(zhí)行結(jié)果

import { ref, toValue } from 'vue'
const countRef = ref(10)
const normalValue = 20
const getter = ()=>30;
console.log(toValue(countRef)) // 10
console.log(toValue(normalValue)) // 20
console.log(toValue(getter)) // 30

-EOF-

到此這篇關(guān)于vue3響應(yīng)式轉(zhuǎn)換常用API的文章就介紹到這了,更多相關(guān)vue3響應(yīng)式常用API內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: