与ref的区别
- ref支持所有类型 reactive只支持object引用类型
type r={
name:string,
age:number
}
let form = reactive<r>({
name:'bb',
age:10
})
-
ref取值赋值都需要.value reactive不需要
-
reactive proxy 不能直接赋值 否则会破坏响应式对象
- 解决方案：1、用数组的方法 2、写成对象 总之就是不能破坏他身上的proxy
<template>
<div>
{{form}}
<button @click="change">修改</button>
</div>
</template>
<script setup lang='ts'>
import { ref , reactive } from 'vue'
let form = reactive([1,2,3,4])
//let form = reactive({
arr:[]
})
const change = () =>{
form.push(1,2,3,4)
}
</script>
readonly
let obj = reactive({name:'b'})
const read = readonly(obj)
read.name = '1' //报错改不了
obj.name = '2' //修改成功
shallowReactive
与shallowRef类似 浅层响应式
同时会被reactive所影响
const obj = shallowReactive({
foo:{
bar:{
num:1
}
}
})
const obj2 = reactive({
name:'1'
})
obj.foo = {xxx} //具有响应式
// obj2.name = '2' 若不注释掉 会影响下面 与ref类似
obj.foo.bar = {} //不具有响应式
reactive源码
if(isReadonly(target)) return target //只读类型 直接返回
return createReactiveObject(
target,
false, //isReadonly
mutableHandlers, //用于引用类型创建proxy
mutableCollectionHandlers,//用于set map weakset weakmap 类型创建proxy
reactiveMap
)
/*
大量的判断
若传入类型不合法 提示 直接返回
若传入已经代理过了 直接返回
若传入还没代理 new一个proxy
*/
\
