isReadonly 实现了isReactive再来实现isReadonly是不是感觉很简单哇,这里就不进行分析啦,和上面isReactive的逻辑是一样的 测试用例: test('测试传入的数据是否是readonly', () => { const origin = { num: 1 }; const readonlyObj = readonly(origin); const readonly
由于data是通过readonly函数创建的只读对象,所以isReadonly(data)返回true。然后,我们创建一个普通的对象plainData,并使用isReadonly函数来判断它是否是只读的。由于plainData不是通过readonly函数创建的只读对象,所以isReadonly(plainData)返回false。 注意事项 需要注意的是,isReactive、isRef和isReadonly函数只能判断对...
ref 的实现 ref实现响应式(基本类型)也是采用Object.definedProperty()来实现的 getter和setter ref实现响应式(对象类型)也是采用Proxy来实现(底层调用reactive方法) reactive 的实现 reactive是采用Proxy来实现 只能对引用
key);if (isObject(res)) {// 如果是对象类型, 递归代理return reactive(res)}// 如果不是 readonly 收集依赖if (!isReadOnly)track(target, key);return res;}}const isObject = val => val !=
原理:因为当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...
const state = shallowReadonly({ foo: 1, nested: { bar: 2 } }) // 更改状态自身的属性会失败 state.foo++ // ...但可以更改下层嵌套对象 isReadonly(state.nested) // false // 这是可以通过的 state.nested.bar++ 五、isReactive() 和 isReadonly()isReactive() 函数检查一个对象是否是由 ...
import{ reactive } from'vue' letperson = reactive({ name:"小满" }) person.name ="大满" 数组异步赋值问题 这样赋值数据是变了,但是页面是不会变化的因为会脱离响应式,需要使用数组方法操作 1 2 3 4 5 6 7 8 9 10 11 12 13 14
readonly,利用proxy,创建一个只读的对象, isReadonly,判断对象是否为只读对象 shallowReadonly 同shallowRef/shallowReactive,浅层做代理,所有首层引用为只读,深度为可更改 代码语言:javascript 代码运行次数:0 运行 AI代码解释 <template> 333 {{state.name}} {{state.attr.age}} {{state.attr.sex}} ++ </temp...
!(isReadonly && target["__v_isReactive" /* IS_REACTIVE */])) { return target; } } 如果传递的value是对象,那么this._rawValue=原始对象,this._value=响应式对象 function createReactiveObject(target, isReadonly, baseHandlers, collectionHandlers, proxyMap) { ...
reactive内部调用createReactiveObject来创建响应式对象。瞄一眼入参有五个: target:代理目标; false:对应createReactiveObject的isReadonly参数; mutableHandlers:普通对象和数组的代理处理程序; mutableCollectionHandlers:Set和Map的代理处理程序; reactiveMap:之前定义的全局变量,收集reactive对应的依赖。 export function rea...