上次一起阅读了watch和computed的源码,其实应该先看副作用effect,因为各个响应式的API里基本都用到了,等结束了reactive和readonly,以及ref,就一起看看effect。这次要说的是reactive和readonly,两者在实现上流程大体一致。尤其是对Map和Set的方法的代理拦截,多少有点妙。 一、reactive和readonly 1. reactive相关类型...
reactive,ref}from'vue';exportdefaultdefineComponent({setup(props,ctx){// 创建一个ref 数据constcount=ref(10)// 通过reactive 创建一个响应对象userconstuser=reactive(
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...
实现了isReactive再来实现isReadonly是不是感觉很简单哇,这里就不进行分析啦,和上面isReactive的逻辑是一样的 测试用例: test('测试传入的数据是否是readonly', () => {const origin = { num: 1 };const readonlyObj = readonly(origin);const readonlyData = isReadonly(readonlyObj)// readonly trueexp...
import { ref, reactive, readonly, shallowReactive } from 'vue'; /* ref:支持所有类型;取值/赋值都需加.value,reactive不需要。 reactive:支持引用类型 Array Object Map Set;由proxy代理,不能直接赋值,否则会破坏响应式对象; 解决方案:可以使用数组push加解构;或者添加一个对象,把数组作为一个属性去解决 ; ...
其中reactive,ref,readonly创建的响应式数据都是深层响应. 而本章主要给大家讲解以上三个API 对应的创建浅层响应式数据的 API, 即shallowRef,shallowReactive,shallowReadonly 1. shallowRef shallowRef是ref浅层作用形式。其实就是浅层响应式 shalloRef的使用方式和ref()完全相同, 不同的只是vue对数据响应式处理的不...
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)....
通俗地讲,即如果想要一个对象是只读的,就使用readonly()函数。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <template> {{obj}} {{newobj}} </template> import{reactive, readonly} from"vue" varobj = reactive({num: 10}) varnewobj = readonly...
1. readonly 函数 接受一个对象 (不论是响应式还是普通的) 或是一个 ref,返回一个原值的只读代理。 只读代理是深层的:对任何嵌套属性的访问都将是只读的。它的 ref 解包行为与 reactive() 相同,但解包得到的值是只读的。 要避免深层级的转换行为,请使用 shallowReadonly() 作替代。
检查对象是否是由 reactive 或 readonly 创建的 proxy。 isReactive 检查对象是否是由 reactive 创建的响应式代理。 import { reactive, isReactive } from 'vue' export default { setup() { const state = reactive({ name: 'John' }) console.log(isReactive(state)) // -> true ...