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.

相关内容

热门资讯

3... “APT”(高级持续攻击)是一种有针对性、隐蔽性、高度持续性的网络攻击。 目前发现的绝大多数APT组...
8... 移动互联网行业漏洞链接:http://mi.cnvd.org.cn/工控系统行业漏洞链接:http:...
2... 由广东省游戏行业协会主办的2016广东省游戏产业年会在广州流花展贸中心举行。 会上,广东省游戏行业协...
第... 第625期蓝色简约学院风毕业答辩报告PPT模板-免费下载-PPT设计| 长歌·图片素材| 来自网络这...
可... 第628期可爱的卡通宇航员太空宇宙课件班级会议家长会通用PPT模板-免费下载-PPT设计| 长歌·图...
日... 每日更新#常用软件/限量免费安卓微软iOS系统Microsoft #KeyMouseGo - ta发...
8... 今天给大家分享8个鲜为人知的电脑神器。 它们都是非常有用的PC软件,而且几乎都可以免费使用。音频播放...
使... 在数字时代,设计签名不再是一项繁琐的任务。 早期的签名设计通常需要寻找专业设计师或使用复杂的设计软件...
兰... ”在抗击疫情的非常时期,师生学校分离,给教师教学造成了一定困难。 学校里学生的学习热情并没有减弱。 ...
P... 如何签署PDF签名? 现代生活中,越来越多的人需要对PDF文件进行签名。 例如电脑签名软件,签署电子...
美... 6月19日,美图举办以“AI时代的影像生产力工具”为主题的第二届影像节,现场发布7款新品:AI视觉创...
手... “手机死机了!”……这似乎是一个很常见的问题,到底是谁的错呢? 如今,智能手机和电脑一样,运行相同的...
数... 2014年,我到吴江高级中学听取数学微课制作情况汇报。 冯伟老师介绍了经范中学微课的录制,录制微课的...
自... 作为一个自媒体人,每天都要录制和编辑视频。 选择一款好的视频编辑工具是每个人面临的第一个问题。 选择...
电... 一、简介我之前写了一篇关于如何使用“TrollStore”的教程。 它是一个名为“opa334”的大...
苹... 苹果手机的流畅性让很多用户为其买单,但毕竟是电子产品,难免会出现一些故障。 其中,手机无法开机是一个...
北... 【TechWeb报道】11月15日消息:随着冬季的到来,低温导致手机电池电量耗尽。 相信很多人都经历...
A... 早在上个月初,就有消息称苹果已向 AppleCare 客户服务发送了一封内部电子邮件,要求更改您的苹...
微... 当我们使用微课制作软件camtasia生成视频时,经常会遇到一些问题。 现在我们收集了一些朋友的问题...
“... 点击上方“抢火车票加速互助”关注公众号,在公众号后台发送文字:神器,即可获得黄牛专用抢票神器。“过年...