Comparaison des fonctions Vue : utilisation de toRaw() et markRaw()

Cet article vous aidera à apprendre la fonction vue et à comparer les fonctions toRaw et markRaw dans vueJs. J'espère qu'il vous sera utile !

Pour certains besoins particuliers, dans le projet, il est nécessaire de changer les données responsives en données de type primitif ordinaire. Cette situation existe.

Dans Vue, vous pouvez modifier les données de type ordinaire en données réactives ; en même temps, vous pouvez également modifier les données de type réactif en données de type ordinaireVue里，能够将普通数据类型的数据变为响应式数据；同时，也能将响应式类型数据变为普通类型数据

可以用于提升数据的性能

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()

Peut être utilisé pour améliorer les performances des données.

fonction toRaw()

reçoit une donnée réactive réactive, convertit une donnée réactive en un type de données commun et la convertit en Les données non réactives équivaut à la restauration d'objets, et reactive est équivalent à la production, mais cela ne fonctionne pas pour les données réactives ref. [Recommandations associées : tutoriel vidéo vuejs

, développement web front-end】Convertir un objet réactif généré par reactive en un objet normal L'objet (Raw)

toRaw() peut être renvoyé par reactive(), readonly(), shallowReactive() code > Ou l'objet original correspondant au proxy créé par <code>shallowReadonly()🎜🎜Il s'agit d'une méthode spéciale qui peut être utilisée pour lire temporairement sans encourir de surcharge d'accès/de suivi du proxy, ou écrire sans déclencher de modifications. Dans la documentation officielle, il n'est pas recommandé de sauvegarder une référence persistante à l'objet d'origine🎜🎜Scénario d'utilisation : Un objet commun utilisé pour lire des objets réactifs ne provoquera pas la page. pour mettre à jour 🎜rrreee🎜Remarque🎜🎜Pour les objets, les attributs ajoutés dynamiquement ultérieurs ne seront pas efficaces si l'objet entier n'est pas exposé au monde extérieur (pour le formulaire de fonction setup) 🎜

Fonction markRaw()

🎜Reçoit une donnée brute et marque un objet pour qu'il ne redevienne plus jamais un objet réactif c'est-à-dire, même si les données. est modifié dans la logique, la page ne sera pas mise à jour. Marquez un objet comme n'étant pas converti en proxy et renvoyez l'objet lui-même Scénario d'application : 🎜🎜[1 ]. ne pas être défini comme réactif, comme les bibliothèques tierces complexes ou les objets de composant Vue🎜🎜[2]. Lors du rendu d'une grande liste avec une source de données immuable, la conversion réactive peut améliorer les performances 🎜rrreee🎜markRaw() et shallowReactive() Cette API peu profonde vous permet d'éviter de manière sélective d'activer la conversion réactive profonde/lecture seule par défaut et d'intégrer des fichiers bruts, objets non proxy dans le spectre d'état 🎜🎜 Si vous définissez un objet brut imbriqué et non marqué sur un objet réactif et que vous y accédez à nouveau, vous obtenez la version proxy, ce qui peut entraîner des risques d'identité d'objet🎜🎜C'est-à-dire que effectuer une opération qui repose sur l'identité de l'objet, mais en utilisant à la fois la version originale et la version proxy du même objet🎜rrreee

Résumé

🎜ref() et reactive() convertissent des données de type non réactives en données réactives, tandis que toRaw() et markRaw() sont équivalents à la restauration de données réactives, transformer des données réactives en données non réactives 🎜🎜 et toRaw est uniquement destiné aux données de type objet réactif, s'il s'agit de convertir des données réactives en données non réactives, ce qui. n'est utilisé que pour le rendu pur des données et ne provoque pas de mises à jour de page, vous pouvez utiliser toRaw ou markRaw()🎜🎜 peut souvent améliorer les performances des données🎜🎜 (Vidéo d'apprentissage partage : 🎜Tutoriel d'introduction à vuejs🎜, 🎜Vidéo de programmation de base🎜)🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!