我们定义了一个枚举类,来区分reactive与readonly,当我们调用isReactive的时候我们通过读枚举项的值,也就调用了get 而读到的属性也就是key ,我们用key来区分一下,就能够得到最后的效果 解决深层嵌套 我们上面实现的isReactive与isReadonly只是在最外层实现了,没有实现深层监听, 我们看一下单测,需要将user身上的name...
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 !=
import{ reactive ,readonly} from'vue' const person = reactive({count:1}) const copy = readonly(person) //person.count++ //可以增加 copy.count++//只读不可以增加 shallowReactive 只能对浅层的数据 如果是深层的数据只会改变值 不会改变视图 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 1...
vue3中的readonly单向数据流函数,传入一个对象(响应式或普通)或 ref,返回一个原始对象的只读代理。一个只读的代理是“深层的”,对象内部任何嵌套的属性也都是只读的。 一、注意: 1、readonly函数是将通过ref 或reactive定义好的数据进行拷贝后变为仅可读的数据,不可进行修改,即无响应 ...
!(isReadonly && target["__v_isReactive" /* IS_REACTIVE */])) { return target; } } 如果传递的value是对象,那么this._rawValue=原始对象,this._value=响应式对象 function createReactiveObject(target, isReadonly, baseHandlers, collectionHandlers, proxyMap) { ...
在Vue 3中,你可以使用一些方法来判断数据是否是响应式的。Vue 3提供了isReactive、isRef和isReadonly等函数来帮助你进行判断。 isReactive函数 isReactive函数用于判断一个对象是否是响应式的。如果对象是通过reactive函数创建的响应式对象,则返回true,否则返回false。
readonly,利用proxy,创建一个只读的对象, isReadonly,判断对象是否为只读对象 shallowReadonly 同shallowRef/shallowReactive,浅层做代理,所有首层引用为只读,深度为可更改 代码语言:javascript 代码运行次数:0 运行 AI代码解释 <template> 333 {{state.name}} {{state.attr.age}} {{state.attr.sex}} ++ </temp...
isReadonly 实现了isReactive再来实现isReadonly是不是感觉很简单哇,这里就不进行分析啦,和上面isReactive的逻辑是一样的 测试用例: test('测试传入的数据是否是readonly', () => { const origin = { num: 1 }; const readonlyObj = readonly(origin); const readonlyData = isReadonly(readonlyObj) /...
const state = shallowReadonly({ foo: 1, nested: { bar: 2 } }) // 更改状态自身的属性会失败 state.foo++ // ...但可以更改下层嵌套对象 isReadonly(state.nested) // false // 这是可以通过的 state.nested.bar++ 五、isReactive() 和 isReadonly()isReactive() 函数检查一个对象是否是由 ...