Vue|Vue 3 Reactivity System Source Code Reading: `markRaw`
admin
2023-08-16 06:12:12
0

Cauz only Object, Array, Map, Set, WeakMap and WeakSet can be acted for in Vue 3 reactivity system. And to value of the type of Object called by Object.isFrozen returns true or with __v_skip unenumerable property of which value is true will can not proxied as well. VNode is one of the folks has a true __v_skip unenumerable property.
And what markRaw does is to make an object to be out of work in reactivity system. And the implementation is straight forward, as VNode does.

export function markRaw(value: T): T { Object.defineProperty(value, '__v_skip', { configurable: true, enumerable: false, value }) return value }

The source code reading is over there, too simple to do analysis, yeah. But what I wanna do is to dig a bit deeper in object.isFrozen. Let's kick start.
Object.isExtensible By default, Objects (including Array) are extensible. That means they can have new properties added to them. And Object.isExtensible is used to determine whether an object is extensible.
Important Note: calling Object.isExtensible with the target object returns true, that just means it cannot have additional properties but it doesn't matter to neither removing nor updating exist properties.
In ES5, if an argument to Object.isExtensible is not an object(primitive value), then it will raise a TypeError because of there is no non-object coercion. But in ES2015, that turned out to treat the non-object argument as if it was a non-extensible ordinary object, and return false constantly.
And an object can be marked as non-extensible by the following methods
  • Object.preventExtensions
  • Object.seal
  • object.freeze
Let's have some examples
let names = [ 'John', 'Mary' ]Object.preventExtensions(names) names.push('Tim') // raise `TypeError` names.remove('John') // it works, ['Mary'] names[0] = 'John' // it turns out to ['John']

How about the corresponding Reflect.isExtensible
Reflect.isExtensible takes the same argument and returns the same result as Object.isExtensible does, but it would not coerce non-object value into non-extensible ordinary one, throws an TypeError instead.
More constraints with Object.isSeal Object.isSeal method determines if an object is sealed. But what is sealed for an object? In addition to what the non-extensible object does, all properties of sealed object are not removable(a.k.a. non-configurable). However, all its properties are writable still.
Show me instance
let John = { nationality: 'China', province: 'GuangDong', city: 'FoShan', hobby: 'skateboard' }John.likeSmoking = true // raise `TypeError`, cauz I really don't like having cigarette ; ) delete John.hobby // raise `TypeError`, it's boring with no hobby in your spare time. John.hobby = 'popping dance' // oh, it works :)

【Vue|Vue 3 Reactivity System Source Code Reading: `markRaw`】At the last, there is no Reflect.isSeal, and Object.isSeal has the catches as Object.isExtensible, but returns true with non-object input always in ES2015 instead.
The most strict folk Object.isFrozen A frozen object is that guy with non-extensible, all its properties are not removable or writable. Non-writable properties can be defined in two ways. One is defining accessor property with getter component only. The other is defining by Object.defineProperty with writable: true option.
let John = { nationality: 'China', province: 'GuangDong', city: 'FoShan', hobby: 'skateboard' }John.likeSmoking = true // raise `TypeError`, cauz I really don't like having cigarette ; ) delete John.hobby // raise `TypeError`, it's boring with no hobby in your spare time. John.hobby = 'popping dance' // raise `TypeError`, oh no! I can not change what I like :(

Finally, there is no Reflect.isSeal neither. But Object.isFrozen has the catches as Object.isExtensible, but returns true with non-object input always in ES2015 instead.

相关内容

热门资讯

超... 本文目录导航: 超级云计算是什么 怎么做难看的PPT 1、...
谢... 本文目录导航: 请问云主机是什么 云主机有什么好处 具体的教程,谢谢! 云...
w... 本文目录导航: wps是什么意思 ppt的新配置designer和morp...
大... 本文目录导航: 大专学什么专业务工率高? 未来十年务工率最高的几大专业都是...
软... 本文目录导航: 软件技术专升本可以报什么专业 云计算专升本可以报医学吗 ...
云... 本文目录导航: 云计算务工前景 云计算务工方向及前景怎样样 ...
学... 本文目录导航: 学云计算进去无能嘛 云计算技术与运行是干什么的 ...
中... 本文目录导航: 如何了解云计算,中国的云计算产业开展现状如何 云计算未来几...
云... 本文目录导航: 云计算1+x证书含金量 云计算须要考什么证书 ...
云... 本文目录导航: 云计算股票龙头股票有哪些? 普通云计算概念龙头股有哪些?...
大... 本文目录导航: 大专云计算技术运行务工方向 大专毕业证上是物联网,实践学习...
大... 本文目录导航: 大数据云计算有必要升本吗 内蒙古大专云计算技术与运行专业升...
9... 本文目录导航: 99%学霸假期逆袭必看网站 99%学霸假期逆袭必看网站 ...
云... 本文目录导航: 云计算属于哪个专业 云计算属于什么专业 计...
计... 本文目录导航: 计算机二级MSOffice上机操作题及答案 想做一篇关于解...
A... 本文目录导航: AI能否会彻底扭转上流职业市场,如律师、会计师和医师? A...
人... 本文目录导航: 人工智能芯片产业链有哪些? 更多本行业钻研剖析详见前瞻产业...
人... 本文目录导航: 人工智能会带来哪些风险? 或许有一天,人工智能机器人将取代...
a... 本文目录导航: ai智能写作软件哪个好 ai智能写作软件有哪些?ai智能对...
自... 本文目录导航: 自考本科计算机专业难吗 自考计算机专业须要考哪些科目 ...