vue3+ts中ref與reactive指定型別實現示例詳解

導讀	這篇文章主要為大家介紹了vue3+ts中ref及reactive如何指定型別的實現示例詳解，有需要的朋友可以借鑑參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

ref 約等於 reactive({ value: x })

ref() 可以定義時無引數，第一次賦值任意型別，然後就不能增加屬性

const refa = ref(6)
const rcta = reactive({ value: 12 })
console.log('refa:', refa) //RefImpl{...}
console.log('refa:', refa.value) //6
console.log('rcta:', rcta) //Proxy {value: 12}
console.log('rcta.value:', rcta.value) //12
const refb = ref({ name: 'bbb' })
console.log('refb:', refb.value, refb.value.name) //Proxy{name: 'bbb'}   bbb
//refb.value.age=18 //報錯 //型別{ name: string;}上不存在屬性age

const a = ref('') //根據輸入引數推導字串型別 Refconst b = ref([]) //可以透過範型顯示約束 Refconst c: Ref= ref([]) //宣告型別 Refconst list = ref([1, 3, 5])
console.log('list前:', list.value)
list.value[1] = 7
console.log('list後:', list.value)
type typPeople = {
  name: string
  age: number
}
const list2: Ref= ref([])
console.log('list2-前:', list2.value) //{} 不是空陣列，而是空物件
list2.value.push({ name: '小張', age: 18 })
console.log('list2-後:', list2.value[0]) //{name: '小張', age: 18}
********* ref 內部值指定型別 *********
const foo = ref('foo')
foo.value = 123
********* 如果ref型別未知，則建議將 ref 轉換為 Ref： *********
function useState(initial: T) {
  const state = ref(initial) as Refreturn state
}
const item: typPeople = { name: 'aa', age: 18 }
const x1 = useState(item) // x1 型別為: Refconst x2 = ref(item) //x2 型別為: Ref<{ name:string; age: number;}>
console.log('ref.value:', x1.value, x1.value.name) 
//Proxy{name: 'aa', age: 18}  aa

返回物件的響應式副本

reactive(x) 必須要指定引數，所以型別就已經確定了，也不能增加屬性

const count = ref(1)
console.log('ref:', count) //RefImpl{...}
//當ref分配給reactive時,ref將自動解包
const obj = reactive({ a: count }) //不需要count.value
console.log(obj.a) // 1
console.log(obj.a === count.value) // true
//obj.b=7 //新增屬性會報錯 // { a: number; }上不存在屬性b
//const str=reactive("aaa")   //這是報錯的,reactive引數只能是物件
const arr = reactive([1, 2]) //陣列，其實結果還是物件
const obj = reactive({ 0: 1, 1: 2 })
console.log('arr', arr) //Proxy {0: 1, 1: 2}
console.log('obj', obj) //Proxy {0: 1, 1: 2}
//reactive定義和ref不同，ref返回的是Ref<T>型別，reactive不存在Reactive<T>
//它返回是UnwrapNestedRefs<T>，和傳入目標型別一致，所以不存在定義通用reactive型別
function reactiveFun<T extends object>(target: T) {
  const state = reactive(target) as UnwrapNestedRefs<T>
  return state
}
type typPeople = {
  name: string
  age: number
}
const item: typPeople = { name: 'aa', age: 18 }
const obj1 = reactive(item) //obj1 型別為: { name: string; age: number; }
const obj2 = reactiveFun(item) //obj2 型別為: { name: string; age: number; }

// isRef 檢查值是否為一個 ref 物件
console.log('是否為ref：', isRef(count)) //true
//isProxy 檢查物件是否是 由reactive或readonly建立的 proxy
//readonly是原始物件的只讀代理
console.log('ref是否為proxy：', isProxy(count)) //false
console.log('reactive是否為proxy：', isProxy(obj)) //true
//isReactive 檢查物件是否是由 reactive 建立的響應式代理
console.log('isReactive判斷：', isReactive(obj)) //true

• toRef 為源響應式物件上的某個元素 新建立一個 ref
• toRefs 將響應式物件Proxy 轉換為普通物件，且元素都指向原始物件的ref
• toRaw 返回 reactive或readonly代理的原始物件

toRef 當你要將 prop 的 ref 傳遞給複合函式時，toRef 很有用

const state = reactive({
  foo: 1,
  bar: 2
})
console.log(state.foo) //1
state.foo++
console.log(state.foo) //2
const fooRef = toRef(state, 'foo')
fooRef.value++
console.log(state.foo) //3  但state.foo並沒有.value屬性，不要混淆
toRefs 將響應式物件Proxy轉換為普通物件，且元素都指向原始物件的ref

toRaw 返回 reactive或readonly 代理的原始物件，當然也可以返回ref的原始物件

const state = reactive({
  foo: 1,
  bar: 2
})
console.log(state) //Proxy {foo: 1, bar: 2}
const refs1 = toRefs(state) //toRefs 將響應式物件Proxy 轉換為普通物件
console.log('toRefs:', refs1) //{foo: ObjectRefImpl, bar: ObjectRefImpl}
const refs2 = toRaw(state) //toRaw 返回 reactive或readonly代理的原始物件
console.log('toRaw:', refs2) //{foo: 1, bar: 2}
const ref1 = ref(5) //ref並不是Proxy,而是RefImpl
const refs3 = toRefs(ref1) //不報錯，但沒意義

以上就是vue3+ts中ref及reactive指定型別實現示例的詳細內容.

原文來自：