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.

相关内容

热门资讯

a... 本文目录导航: abaqus振动照应剖析中处罚力的加载方法 abaqus反...
a... 本文目录导航: abaqus资料可以不设置参数吗 abaqus外面没有自带...
A... 本文目录导航: ANSYS Workbench中二维平面剖析的设置。 an...
h... 本文目录导航: hfss19.2允许win11吗 微带如何假负载 ...
a... 本文目录导航: ansys模流剖析用哪个模块 Ansys_workbenc...
v... 本文目录导航: 在ansys中,建好几何模型后,随意变动一下视图,旋转、加大、增加,Fit...
A... 本文目录导航: Ansys软件可以收费试用吗? ansys有哪些软件 ...
a... 本文目录导航: abaqus中如何同时关上两个cae文件? abaqus找...
a... 本文目录导航: ansys流体剖析迭代次数可以中止嘛 Ansys Flot...
这... 本文目录导航: 哪位大佬有 Fluent14.5流场剖析从入门到知晓,这种百度网盘资源的链...
经... 双击D2进入System Coupling的设置,在Solution上右击选用Clear Gener...
a... 本文目录导航: ansys软件引见 ansys有哪些软件 ...
a... 本文目录导航: abaqus系列技巧18:聊聊abaqus云图外面的魔术加大镜--缩放倍数...
a... 本文目录导航: abaqus中网格不可绘制 abaqus结果可视化某个部件...
a... 本文目录导航: abaqus结果可视化某个部件云图只显示网格接壤处的? a...
驳... 本文目录导航: ABAQUS中假设选择施加的载荷类型为pressure,对应的载荷单位应该...
a... 本文目录导航: abaqus2020旋转不了物体 怎样判别abaqus转的...
在... 本文目录导航: 在abaqus中如何删除一个单元 ABAQUS怎样删除网格...
它... 本文目录导航: abaqus为什么叫abaqus,它是那些词的简称么?全称是什么呢? ...
披着“现货订购”外衣的非法期货...   近期,甘肃西北商品交易市场有限公司旗下的“铂银掘金APP”引发大量投资者集中维权。该平台打着“低...