import { reactive } from 'vue'; const numList = reactive([1, 2, 3, 4, 5]); function clearArray() { numList.length = 0; // 清空数组 console.log(numList); // 验证数组是否为空 } clearArray(); 2. 使用splice方法 splice方法也可以用来清空数组,但需要注意的是,它可能会触发多次响应式更...
if (target && (target as Target)[ReactiveFlags.IS_READONLY]) { return target } return createReactiveObject( target, false, mutableHandlers, mutableCollectionHandlers, reactiveMap ) } 复制代码 createReactiveObject 在createReactiveObject中,做的事情就是为target添加一个proxy代理。这是其核心,reactive最终...
targetIsArray || !isIntegerKey(key) returnshouldUnwrap ? res.value : res } // 属性值是对象类型: // - 是只读属性,则通过 readonly 返回结果, // - 且是非只读属性,则递归调用 reactive 向外返回 proxy 代理对象 if(isObject(res)) { returnisReadonly ? readonly(res) : reactive(res) } retur...
Vue3 中可以通过响应式API来创建响应式对象,之前介绍过一些响应式 API, 如 ref、computed、reactive、shallowRef、shallowReactive等等. 相较于 Vue2 中使用 Object.definProperty 来劫持 get 和 set 不同, Vue3 中使用的是 Proxy 来创建响应式对象,仅将 get 和 set 仅用于 ref. 与此同时, 响应式 API 大致都...
*@returns*/functioncreateArrayInstrumentations() {constinstrumentations:Record<string,Function> = {}// 装配对操作敏感的数组方法,以用于可能的响应式操作// instrument identity-sensitive Array methods to account for possible reactive// values;(['includes','indexOf','lastIndexOf']asconst).forEach(key...
// 真正交给Proxy第二个参数的handlers只有一个get// 把用户对于map的get、set这些api的访问全部移交给上面的劫持函数exportconstcollectionHandlers={get(target:Raw,key:Key,receiver:ReactiveProxy){// 返回上面被劫持的apitarget=hasOwnProperty.call(instrumentations,key)?instrumentations:targetreturnReflect.get(tar...
items.array = data console.log(items) } // 直接修改会报警告,可以修改items.array,不能修改readOnlyItems的array,因为是只读的 readOnlyItems.array = data 七. reactive源码 packages -> reactivity -> reactive.ts 1 2 3 4 5 6 7 8 9 10...
reactive是vue3中用于生成引用类型的api。 AI检测代码解析 const user = reactive({ name: 'wangly19', age: 22, description: '一名掉头发微乎其微的前端小哥。' }) 复制代码 ...
reactive() 函数接收一个对象作为参数,并返回一个代理对象。 effect() 函数用于定义副作用,它的参数就是副作用函数,这个函数可能会产生副作用,例如上面代码中的 document.body.innerText = obj.text。在副作用函数内的响应式数据会与副作用函数之间建立联系,即所谓的依赖收集,当响应式数据变化之后,会导致副作用函数...
console.warn(`value cannot be made reactive: ${String(target)}`) } return target } ``` 其次判断当前对象是否已经被代理且并不是只读的,那么本身就是一个代理对象,那么就没有必要再去进行代理了,直接将其当作返回值返回,避免重复代理。 ```ts ...