组件内部状态管理优先使用 reactive 在组件内部，使用 reactive 可以更方便地管理复杂的状态。例如，在一个购物车组件中，管理商品列表和总价。import { reactive } from 'vue';export default { setup() { const cart = reactive({ items: [ { id: 1, name: 'Product A', price: 10 }, {...
方法内首先会对传入的目标对象做一个检测,检测其是否是一个 readonly 只读类型的数据,对于只读类型数据,自然没有什么必要实现数据响应,毕竟不会发生变化嘛;如果非只读类型数据,reactive 方法就会调用一个名为 createReactiveObject 的方法来给目标对象创建一个响应式的对象副本。这个副本对象中自动接入了ref,所以我们不...
functiongetTargetType(value:Target){returnvalue[ReactiveFlags.SKIP]||!Object.isExtensible(value)?TargetType.INVALID:targetTypeMap(toRawType(value))}functiontargetTypeMap(rawType:string){switch(rawType){case'Object':case'Array':returnTargetType.COMMONcase'Map':case'Set':case'WeakMap':case'WeakSet':retur...
*@returns*/functioncreateArrayInstrumentations() {constinstrumentations:Record<string,Function> = {}// 装配对操作敏感的数组方法,以用于可能的响应式操作// instrument identity-sensitive Array methods to account for possible reactive// values;(['includes','indexOf','lastIndexOf']asconst).forEach(key...
【vue3源码】七、reactive——Object的响应式实现 参考代码版本:vue 3.2.37 官方文档:https://vuejs.org/ reactive返回一个对象的响应式代理。 使用 const obj = { count: 1, flag: true, obj: { str: '' } } const reactiveObj = reactive(obj) ...
在childOb.dep.depend()方法下面还有个if,如果属性指向的是个数组,遍历数组中的元素,使其observer的dep属性收集renderWatcher。所以array[0]='a'是不能reactive的,但是array[0].push('a')是可以reactive的
上次一起阅读了watch和computed的源码,其实应该先看副作用effect,因为各个响应式的API里基本都用到了,等结束了reactive和readonly,以及ref,就一起看看effect。这次要说的是reactive和readonly,两者在实现上流程大体一致。尤其是对Map和Set的方法的代理拦截,多少有点妙。 一、reactive和readonly 1. reactive相关类型...
它们有啥关系,其实没有啥关系,只是大家习惯性的会回答 Object.defineProperty 不能拦截 Array 的操作,这句话说得对但也不对。 使用Object.defineProperty 拦截 Array Object.defineProperty 可用于实现对象属性的 get 和 set 拦截,而数组其实也是对象,那自然是可以实现对应的拦截操作,如下: ...
从上图我们可以看到,data中的每一个属性都会带 __ob__ 属性,它是一个Observer对象,其实Vue2中响应式的关键就是这个对象,在data中的每一个属性都会带get、set方法,而Vue源码中其实把get、set分别定义为reactiveGetter、reactiveSetter,这些东西怎么添加进去的。Vue2又是怎么数据变化同时实时渲染页面?先看看下面的图...
isShallow(value)&&!isReadonly(value)){oldValue=toRaw(oldValue)value=toRaw(value)}if(!isArray(target)&&isRef(oldValue)&&!isRef(value)){oldValue.value=valuereturntrue}}else{// in shallow mode, objects are set as-is regardless of reactive or not}consthadKey=isArray(target)&&isIntegerKey...