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.

相关内容

热门资讯

大浪淘金APP黑幕揭秘:内盘操...   大浪淘金APP平台最隐蔽的黑幕,在于其完全封闭的内盘交易系统。这个看似与国际市场接轨的交易平台,...
告别固定工资实现财富自由?一品...   普通投资者被广告宣传诱导,注册就送现金,充值返现金券等等这些宣传方式,都是在引流到平台开户,不怕...
哈易购APP打着现货交易幌子搞...   网络上各类白银、铂金等贵金属投资广告铺天盖地,不少平台以"现货交易"为名,暗中却从事着非法期货交...
5元起投!高额收益?中国白银、...   上海华通白银国际交易中心有限公司(以下简称“华通白银国际”)打着“白银、铂金现货订购”的旗号,实...
"九州订购APP、起...   近年来,贵金属投资热度持续攀升,但乱象也随之而来。一些不法分子趁机搭建虚假交易平台,打着"低门槛...
坚锅淘金APP投资者频繁爆仓亏...   坚锅淘金APP对外宣称是贵金属现货交易平台,日常出入金看似畅通无阻,给人一种合规运营的假象。但事...
斗金订购APP“5元订购现货”...   斗金订购APP“5元订购现货”骗局揭秘:充值易、回本难,越陷越深!  许多投资人在未核实平台合规...
贵金属APP乱象曝光:&quo...   当前市场上部分贵金属类APP未取得正规交易资质,涉嫌误导消费者参与白银、铂金等商品的非合规交易!...
华通白银、银宝街APP被指虚假...   警惕现货白银投资陷阱:上海华通白银背后的平台涉嫌非法期货交易  近年来,各类现货白银交易平台以“...
充值送300,月入过万?别被量...   如今,网络上充斥着大量未经批准的贵金属及其他产品订购交易平台。这些平台普遍缺乏合法经营资质,却将...
鑫汇智投APP贵金属非法期货、...   鑫汇智投APP贵金属非法期货、人为控盘,大量投资者遭恶意收割  鑫汇智投APP长期以“低门槛、高...
矅光智策APP非法贵金属交易骗...   不少投资人在矅光智策APP上进行贵金属交易后出现了严重亏损。许多人在下载该平台时,根本不清楚其是...
飞鸽订购APP非法期货交易骗局...   飞鸽订购APP非法期货交易骗局,很多投资者根本没搞懂规则就盲目充值,买涨买跌跟买cai票一样!平...
天龙白银APP被操控的非法期货...   中小投资者在网络平台参与商品现货订购交易,表面看似合规合法,实则暗藏诸多难以察觉的风险。商品现货...
下载送试玩金?千万别碰!带你揭...   当前,许多贵金属APP交易平台正采用欺诈性营销手段。它们通过抖音等短视频平台,以“5元起投”“充...
泡泡淘金APP骗局:打着&qu...   泡泡淘金APP骗局:打着"商品订购"幌子,实则非法期货收割投资者!投资需谨慎,切勿轻信“高额回报...
南商云购APP虚假电子盘背后的...   南商云购是虚假电子盘吗?它是否具备合规的交易资质?这个曾经的"现货电子盘"如今摇身一变,披上了"...
警惕"祥龙订购&qu...   祥龙订购APP、掌上银牛APP等平台背后的运营方——四川禄宏商品现货市场有限公司,仅具备现货交易...
中国白银、华银:虚假宣传、后台...   中国白银APP宣称是上市公司“中国白银集团”与“上海华通白银国际交易中心”旗下的现货交易平台,提...
起底“优品订购”APP非法期货...   “优品订购”APP根本不具备任何合法的交易资质。其背后的运营方仅凭随便注册一家公司、开发一款交易...