Vue-Funktionsvergleich: Verwendung von toRaw() und markRaw()

Dieser Artikel wird Ihnen helfen, die Vue-Funktion zu erlernen und die Funktionen toRaw und markRaw in vueJs zu vergleichen. Ich hoffe, er wird Ihnen hilfreich sein!

Für einige spezielle Anforderungen ist es im Projekt erforderlich, die Reaktionsdaten in gewöhnliche Daten vom primitiven Typ umzuwandeln. Diese Situation besteht.

In Vue können Sie Daten vom normalen Datentyp in reaktionsfähige Daten umwandeln. Gleichzeitig können Sie Daten vom reaktionsfähigen Typ in Daten vom normalen Typ umwandeln. Vue里，能够将普通数据类型的数据变为响应式数据；同时，也能将响应式类型数据变为普通类型数据

可以用于提升数据的性能

toRaw()函数

接收一个reactive响应式数据,将一个响应式的数据变为普通类型的数据,转化为非响应式数据,相当于还原对象,reactive相当于制作,但对于ref响应式数据不起作用。【相关推荐：vuejs视频教程、web前端开发】

将一个由reactive生成的响应式对象转为普通(原始)对象

toRaw()可以返回由reactive()、readonly()、shallowReactive()或shallowReadonly()创建的代理对应的原始对象

这是一个可以用临时读取而不引起代理访问/跟踪开销,或是写入而不触发更改的特殊方法,在官方文档里,是不建议保存对原始对象的持久引用

使用场景:用于读取响应式对象的普通对象,对这个普通对象的所有操作,不会引起页面的更新

const foo = {}
const reactiveFoo = reactive(foo)

console.log(toRaw(reactiveFoo) === foo)  // true

注意

针对对象,后续动态新增的属性,如果没有把整个对象对外暴露出去,模板中使用新增的变量是不生效的(针对setup函数形式)

markRaw()函数

接收一个原始数据,标记一个对象,使它永远不会再成为响应式对象,也就是数据在逻辑中即使修改变化了,但是页面不会更新变化

将一个对象标记为不可被转为代理,返回该对象本身

应用场景:

[1]. 有些值不应该被设置为响应式的,例如复杂的第三方类库或Vue组件对象

[2]. 当渲染具有不可变数据源的大列表时,跳过响应式转换可以提高性能

const foo = markRaw({})
console.log(isReactive(reactive(foo))) // false

// 也适用于嵌套在其他响应性对象
const bar = reactive({ foo })
console.log(isReactive(bar.foo)) // false

markRaw()与shallowReactive()这样浅层式API使你可以有选择的避开默认的深度响应/只读转换,并在状态关系谱中嵌入原始,非代理的对象

如果把一个嵌套的,没有标记的原始对象设置成一个响应式对象,然后再次访问它,你获取到的是代理的版本,这可能会导致对象身份风险

即执行一个依赖于对象身份的操作,但却同时使用了同一对象的原始版本和代理版本

const foo = markRaw({
  nested: {}
})

const bar = reactive({
  // 尽管 `foo` 被标记为了原始对象，但 foo.nested 却没有
  nested: foo.nested
})

console.log(foo.nested === bar.nested) // false

总结

ref()与reactive()是将一个非响应式类型数据变为响应式数据,而toRaw()与markRaw()相当于是对响应式数据的还原,将一个响应式数据变为非响应式数据

而toRaw只针对响应式对象类型的数据起作用,如果涉及到将一个响应式数据转变为非响应式数据,只用于纯数据的渲染,不引起页面的更新,就可以使用toRaw或markRaw()

Kann zur Verbesserung der Datenleistung verwendet werden

toRaw()-Funktion

empfängt reaktionsfähige reaktive Daten, wandelt reaktionsfähige Daten in einen allgemeinen Datentyp um und konvertiert sie in Nicht reagierende Daten entsprechen der Wiederherstellung von Objekten und reactive entspricht der Produktion, funktioniert jedoch nicht für ref reaktionsfähige Daten. [Verwandte Empfehlungen: vuejs-Video-Tutorial

, Web-Frontend-Entwicklung】Konvertieren Sie ein von reactive generiertes responsives Objekt in ein normales (Roh-)Objekt

toRaw() kann von reactive(), readonly(), shallowReactive() zurückgegeben werden code >Oder das Originalobjekt, das dem von <code>shallowReadonly()erstellten Proxy entspricht. 🎜🎜Dies ist eine spezielle Methode, die zum vorübergehenden Lesen verwendet werden kann, ohne dass Proxy-Zugriff/Tracking-Overhead anfällt, oder zum Schreiben, ohne Änderungen auszulösen. In der offiziellen Dokumentation wird nicht empfohlen, einen dauerhaften Verweis auf das Originalobjekt zu speichern🎜🎜Verwendungsszenario: Ein gemeinsames Objekt, das zum Lesen reaktionsfähiger Objekte verwendet wird. Alle Vorgänge an diesem gemeinsamen Objekt lösen die Seite nicht aus Update 🎜rrreee🎜Hinweis🎜🎜Bei Objekten sind nachfolgende dynamisch hinzugefügte Attribute nicht wirksam, wenn das gesamte Objekt nicht der Außenwelt ausgesetzt ist (für setup-Funktionsform)🎜

markRaw()-Funktion

🎜Empfängt Rohdaten und markiert ein Objekt, sodass es nie wieder zu einem reaktiven Objekt wird In der Logik geändert, wird die Seite nicht als nicht in einen Proxy konvertiert markiert und das Objekt selbst zurückgegeben: 🎜🎜[1] reaktiv eingestellt werden, wie z. B. komplexe Bibliotheken von Drittanbietern oder Vue-Komponentenobjekte🎜🎜[2]. Beim Rendern einer großen Liste mit einer unveränderlichen Datenquelle kann die reaktive Konvertierung die Leistung verbessern 🎜rrreee🎜markRaw() und shallowReactive() Eine solche flache API ermöglicht es Ihnen, selektiv die standardmäßige tiefe reaktive/schreibgeschützte Konvertierung zu vermeiden und Raw, Non, einzubetten -Proxy-Objekte im Zustandsspektrum 🎜🎜 Wenn Sie ein verschachteltes, nicht markiertes Rohobjekt auf ein reaktives Objekt setzen und dann erneut darauf zugreifen, erhalten Sie die Proxy-Version, was zu Risiken bei der Objektidentität führen kann🎜🎜Das heißt, die Leistung eine Operation, die auf der Objektidentität basiert, aber sowohl die Originalversion als auch die Proxy-Version desselben Objekts verwendet🎜rrreee

Zusammenfassung

🎜ref() und <code>reactive() konvertieren Daten eines nicht reagierenden Typs in reaktionsfähige Daten, während toRaw () und markRaw() äquivalent sind Die Wiederherstellung reaktionsfähiger Daten, die Umwandlung reaktionsfähiger Daten in nicht reaktionsfähige Daten 🎜🎜 und toRaw gilt nur für Daten vom Typ Responsive Objekt, wenn es um die Konvertierung reaktionsfähiger Daten in nicht reaktionsfähige Daten geht Wird nur für die reine Datenwiedergabe verwendet und führt nicht zu Seitenaktualisierungen. Sie können toRaw oder markRaw() verwenden : 🎜vuejs Einführungs-Tutorial🎜, 🎜Grundlegendes Programmiervideo🎜)🎜

Das obige ist der detaillierte Inhalt vonVue-Funktionsvergleich: Verwendung von toRaw() und markRaw(). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!