vue3+ts中怎麼使用ref與reactive指定型別

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('') //根据输入参数推导字符串类型 Ref const b = ref([]) //可以通过范型显示约束 Ref const c: Ref = ref([]) //声明类型 Ref const 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 Ref return state } const item: typPeople = { name: 'aa', age: 18 } const x1 = useState(item) // x1 类型为: Ref const x2 = ref(item) //x2 类型为: Ref<{ name:string; age: number;}> console.log('ref.value:', x1.value, x1.value.name) //Proxy{name: 'aa', age: 18} aa

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

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属性，不要混淆

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) //不报错，但没意义