vue3+ts 中 ref与reactive 如何指定范例

手机软件开发 · 2024-10-8 05:41:53

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) //6console.log('rcta:', rcta) //Proxy {value: 12}console.log('rcta.value:', rcta.value) //12const 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('') //根据输入参数推导字符串范例 Ref<string>const b = ref<string[]>([]) //可以通过范型表现束缚 Ref<string[]>const c: Ref<string[]> = ref([]) //声明范例 Ref<string[]> const list = ref([1, 3, 5])console.log('list前:', list.value)list.value[1] = 7console.log('list后:', list.value)type typPeople = {  name: string  age: number}const list2: Ref<typPeople[]> = 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<string | number>('foo')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: 'aa', age: 18 }const x1 = useState(item) // x1 范例为: Ref<typPeople>const x2 = ref(item) //x2 范例为: Ref<{ name:string; age: number;}>console.log('ref.value:', x1.value, x1.value.name) //Proxy{name: 'aa', age: 18}  aareactive

返回对象的相应式副本
reactive(x)  必须要指定参数，以是范例就已经确定了，也不能增长属性
const count = ref(1)console.log('ref:', count) //RefImpl{...}//当ref分配给reactive时,ref将自动解包const obj = reactive({ a: count }) //不须要count.valueconsole.log(obj.a) // 1console.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、isReactive

// isRef 查抄值是否为一个 ref 对象console.log('是否为ref：', isRef(count)) //true//isProxy 查抄对象是否是由reactive或readonly创建的 proxy//readonly是原始对象的只读署理console.log('ref是否为proxy：', isProxy(count)) //falseconsole.log('reactive是否为proxy：', isProxy(obj)) //true//isReactive 查抄对象是否是由 reactive 创建的相应式署理console.log('isReactive判断：', isReactive(obj)) //truetoRef、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) //1state.foo++console.log(state.foo) //2const 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,而是RefImplconst refs3 = toRefs(ref1) //不报错，但没意义

vue3+ts 中 ref与reactive 如何指定范例

所属分类: 问答交流

新帖推荐: 30日

推荐作品