> 웹 프론트엔드 > View.js > ref와 반응성을 사용하여 vue3+ts에서 유형을 지정하는 방법

ref와 반응성을 사용하여 vue3+ts에서 유형을 지정하는 방법

王林
풀어 주다: 2023-05-10 19:19:04
앞으로
2509명이 탐색했습니다.

ref 的基础特性

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
로그인 후 복사

如何在ref中指定类型

const a = ref(&#39;&#39;) //根据输入参数推导字符串类型 Ref<string>
const b = ref<string[]>([]) //可以通过范型显示约束 Ref<string[]>
const c: Ref<string[]> = ref([]) //声明类型 Ref<string[]> 
const list = ref([1, 3, 5])
console.log(&#39;list前:&#39;, list.value)
list.value[1] = 7
console.log(&#39;list后:&#39;, list.value)
type typPeople = {
  name: string
  age: number
}
const list2: Ref<typPeople[]> = ref([])
console.log(&#39;list2-前:&#39;, list2.value) //{} 不是空数组,而是空对象
list2.value.push({ name: &#39;小张&#39;, age: 18 })
console.log(&#39;list2-后:&#39;, list2.value[0]) //{name: &#39;小张&#39;, age: 18}
********* ref 内部值指定类型 *********
const foo = ref<string | number>(&#39;foo&#39;)
foo.value = 123
********* 如果ref类型未知,则建议将 ref 转换为 Ref<T>: *********
function useState<T>(initial: T) {
  const state = ref(initial) as Ref<T>
  return state
}
const item: typPeople = { name: &#39;aa&#39;, age: 18 }
const x1 = useState(item) // x1 类型为: Ref<typPeople>
const x2 = ref(item) //x2 类型为: Ref<{ name:string; age: number;}>
console.log(&#39;ref.value:&#39;, x1.value, x1.value.name) 
//Proxy{name: &#39;aa&#39;, age: 18}  aa
로그인 후 복사

reactive

返回对象的响应式副本
reactive(x) 必须要指定参数,所以类型就已经确定了,也不能增加属性

const count = ref(1)
console.log(&#39;ref:&#39;, 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(&#39;arr&#39;, arr) //Proxy {0: 1, 1: 2}
console.log(&#39;obj&#39;, obj) //Proxy {0: 1, 1: 2}
//reactive定义和ref不同,ref返回的是Ref&lt;T&gt;类型,reactive不存在Reactive&lt;T&gt;
//它返回是UnwrapNestedRefs&lt;T&gt;,和传入目标类型一致,所以不存在定义通用reactive类型
function reactiveFun&lt;T extends object&gt;(target: T) {
  const state = reactive(target) as UnwrapNestedRefs&lt;T&gt;
  return state
}
type typPeople = {
  name: string
  age: number
}
const item: typPeople = { name: &#39;aa&#39;, age: 18 }
const obj1 = reactive(item) //obj1 类型为: { name: string; age: number; }
const obj2 = reactiveFun(item) //obj2 类型为: { name: string; age: number; }
로그인 후 복사

isRef、isReactive

// isRef 检查值是否为一个 ref 对象
console.log(&#39;是否为ref:&#39;, isRef(count)) //true
//isProxy 检查对象是否是 由reactive或readonly创建的 proxy
//readonly是原始对象的只读代理
console.log(&#39;ref是否为proxy:&#39;, isProxy(count)) //false
console.log(&#39;reactive是否为proxy:&#39;, isProxy(obj)) //true
//isReactive 检查对象是否是由 reactive 创建的响应式代理
console.log(&#39;isReactive判断:&#39;, isReactive(obj)) //true
로그인 후 복사

toRef、toRefs、toRaw

  • 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, &#39;foo&#39;)
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(&#39;toRefs:&#39;, refs1) //{foo: ObjectRefImpl, bar: ObjectRefImpl}
const refs2 = toRaw(state) //toRaw 返回 reactive或readonly代理的原始对象
console.log(&#39;toRaw:&#39;, refs2) //{foo: 1, bar: 2}
const ref1 = ref(5) //ref并不是Proxy,而是RefImpl
const refs3 = toRefs(ref1) //不报错,但没意义
로그인 후 복사

위 내용은 ref와 반응성을 사용하여 vue3+ts에서 유형을 지정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:yisu.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿