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...
readonly函数的作用是将一个响应式对象(如通过reactive创建的对象)转换为一个只读版本。这意味着你不能修改该对象的属性或向其中添加新属性,从而提供了一种保护数据不被意外修改的机制。 2. readonly在Vue3中的常见使用场景 保护状态数据:当你希望确保某些数据在应用运行过程中不被修改时,可以使用readonly。例如,配...
1. 创建状态管理模块 首先,创建一个状态管理模块文件(例如store.ts),在这个文件中定义你的状态、getter 和 action。 // store.tsimport{reactive,readonly}from'vue';// 定义状态类型interfaceState{count:number;message:string;}// 初始化状态conststate=reactive<State>({count:0,message:'Hello, Vue!',});...
1、readonly函数是将通过ref 或reactive定义好的数据进行拷贝后变为仅可读的数据,不可进行修改,即无响应 2、如强制修改 控制台将会报错警告 二、reactive 和 readonly <template>vue3.0 beta{{ original.count }} --- {{ copy.count }}add</template>import{ reactive, readonly, watchEffect }from"vue";e...
readonly和 reactive 类似,只不过,readonly不需要进行依赖收集,并且不可被 set,我们只需要在 set 时报错即可 仍然从测试用例入手 it("readonly", () => {const original = { foo: 1, bar: { baz: 2 } };const wrapped = readonly(original);expect(wrapped).not.toBe(original);expect(wrapped.foo)....
简介:手撸vue3核心源码——响应式原理(isReactive,isReadonly) isReactive与isReadonly isReactive和isReadonly最大区别是啥,一个可改,一个不可改 而且reactive需要收集依赖,而readonly不需要,那么我们根据这点来写代码,那么我们判断一下是不是就可以了 ...
function createReactiveObject(target, isReadonly, baseHandlers, collectionHandlers, proxyMap) { if (!isObject(target)) { return target; } } 如果传递的value是响应式对象,那么this._rawValue=原始对象,this._value=响应式对象 function createReactiveObject(target, isReadonly, baseHandlers, collectionHandl...
import{ref,reactive,readonly}from'vue'setup(props,context){constx=ref("xwl")consty="xwl"constobj=reactive({name:'xwl',age:18,info:{school:'secret'}})constreadonly1=readonly(y);普通对象constreadonly2=readonly(x);ref对象constreadonly3=readonly(obj);reactive返回的对象 ...
2. shallowReadonly 浅只读 shallowReadonly中放了一个对象,对象中直接属性是不可以修改的; 如果对象下的属性下还有对象, 那么这个对象下的属性就可以修改的. <template>{{viewSate}}按钮</template>import{ reactive,shallowReadonly}from'vue'exportdefault{name:'App',setup(){letstate=reactive({name:"张三"...
let person=reactive({ name:'张三', age:18, job:{ j1:{ salary:20} } })//应用场景:比如从别的地方拿到一个数据,而且这个数据是不希望在这里被更改。//person值就不能更改了person=readonly(person)//表示只有第一层是只读的,深层次的数据还是能够更改//person = shallowReadonly(person)//sum = rea...