实现了isReactive再来实现isReadonly是不是感觉很简单哇,这里就不进行分析啦,和上面isReactive的逻辑是一样的 测试用例: test('测试传入的数据是否是readonly', () => {const origin = { num: 1 };const readonlyObj = readonly(origin);const readonlyData = isReadonly(readonlyObj)// readonly trueexp...
原理:因为当obj.key的时候会触发get,这样就很简单了,直接在isReactive和isReadonly的方法里执行raw[key],然后在get方法里进行判断key functioncreateGetter(isReadonly:boolean=false){// 优化get setreturnfunctionget(target,key){if(key===reactiveFlags.IS_REACTIVE){return!isReadonly}if(key===reactiveFlags....
reactive内部调用createReactiveObject来创建响应式对象。瞄一眼入参有五个: target:代理目标; false:对应createReactiveObject的isReadonly参数; mutableHandlers:普通对象和数组的代理处理程序; mutableCollectionHandlers:Set和Map的代理处理程序; reactiveMap:之前定义的全局变量,收集reactive对应的依赖。 export function rea...
· 检查对象是否由 reactive 或 readonly 创建的 proxy 2. isReactive · 检查对象是否由 reactive 创建的响应式代理 · 如果该代理是 readonly 创建的,但包裹了由 reactive 创建的另一个代理,它也会返回true 3. isReadonly · 检查对象是否由 readonly 创建的只读代理 4. toRaw · 返回由reactive 或 reado...
import{ reactive } from'vue' letperson = reactive({ name:"小满" }) person.name ="大满" 数组异步赋值问题 这样赋值数据是变了,但是页面是不会变化的因为会脱离响应式,需要使用数组方法操作 1 2 3 4 5 6 7 8 9 10 11 12 13 14
isProxy 检查对象是否是由 reactive 或 readonly 创建的 proxy。 isReactive 检查对象是否是由 reactive 创建的响应式代理。 import { reactive, isReactive } from 'vue' export default { setup() { const state = reactive({ name: 'John' })
1.reactive 2.toRaw 3.readonly 4.isPorxy 5.isReactive 6.isReadonly 7.ref 8.unref 9.toRef 10.toRefs reactive 返回对象的响应式副本 const obj = reactive({ count: 0
shallowReactive允许修改浅层property,shallowReadonly不允许,Vue3会阻止并给出报错。 isReactive、isReadonly、isProxy的区别 isReactive:Proxy是否是由reactive创建,是则返回true isReadonly:Proxy由readonly创建则返回true isProxy:上面两个满足任意一条,就返回true ...
本章主要针对vue3组合式API 中响应式核心reactive,ref,Readonly三个API的讲解 1. reactive 在vue2中定义在data选项中的数据会自动被vue处理为响应式数据, 所谓的响应式数据, 就是被vue给检测的数据, 当数据发生变化时,vue会自动处理一些副作用, 比如页面重新渲染. ...
import { ref, reactive, readonly, shallowReactive } from 'vue'; /* ref:支持所有类型;取值/赋值都需加.value,reactive不需要。 reactive:支持引用类型 Array Object Map Set;由proxy代理,不能直接赋值,否则会破坏响应式对象; 解决方案:可以使用数组push加解构;或者添加一个对象,把数组作为一个属性去解决 ; ...