Vue 함수 비교: toRaw() 및 markRaw() 사용

이 글은 vue 함수를 배우고 vueJs의 toRaw 및 markRaw 함수를 비교하는 데 도움이 될 것입니다.

특수한 요구 사항이 있는 경우 프로젝트에서 반응형 데이터를 일반 기본 유형 데이터로 변경해야 하는 경우가 있습니다.

Vue에서는 일반 데이터 유형 데이터를 반응형 데이터로 변경하는 동시에 반응형 데이터를 일반 유형 데이터로 변경할 수도 있습니다.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()

데이터 성능을 향상하는 데 사용할 수 있습니다.

toRaw() 함수

는 반응형 반응형 데이터를 수신하고, 반응형 데이터를 일반적인 유형의 데이터로 변환하고, 이를 무응답 데이터는 객체 복원과 동일하고 reactive는 프로덕션과 동일하지만 ref 반응형 데이터에는 작동하지 않습니다. [관련 권장사항: vuejs 비디오 튜토리얼

, 웹 프론트엔드 개발】 reactive로 생성된 반응형 객체를 일반 객체로 변환 (Raw) 객체

toRaw()는 reactive(), readonly(), shallowReactive()에 의해 반환될 수 있습니다. code > 또는 <code>shallowReadonly()에 의해 생성된 프록시에 해당하는 원본 개체🎜🎜프록시 액세스/추적 오버헤드를 발생시키지 않고 일시적으로 읽거나 변경 사항을 트리거하지 않고 쓰는 데 사용할 수 있는 특수 메서드입니다. 공식 문서에서는 원본 객체에 대한 영구 참조를 저장하는 것을 권장하지 않습니다🎜🎜사용 시나리오: 반응형 객체를 읽는 데 사용되는 공통 객체입니다. 이 공통 객체에 대한 모든 작업은 페이지를 발생시키지 않습니다. 업데이트하려면 🎜rrreee🎜참고🎜🎜객체의 경우 전체 객체가 외부 세계에 노출되지 않으면 이후에 동적으로 추가된 속성이 적용되지 않습니다( 설정 함수 형식의 경우). 🎜

markRaw() 함수

🎜 원시 데이터를 받아 객체가 다시는 반응 객체가 되지 않도록 표시합니다. 논리에서 수정되면 페이지가 업데이트되지 않습니다. 개체를 프록시로 변환하지 않는 것으로 표시하고 개체 자체를 반환합니다. 🎜🎜[1 ]. 복잡한 타사 라이브러리 또는 Vue 구성 요소 개체🎜🎜[2]와 같은 반응형으로 설정하지 마세요.[2] 불변 데이터 소스가 있는 대규모 목록을 렌더링할 때 점프 반응형 변환을 사용하면 성능이 향상될 수 있습니다 🎜rrreee🎜markRaw() 및 shallowReactive() 이 얕은 API를 사용하면 기본 심층 반응형/읽기 전용 변환 설정을 선택적으로 피하고 원시를 포함할 수 있습니다. 상태 스펙트럼의 비 프록시 객체 🎜🎜 중첩되고 표시되지 않은 원시 객체를 반응 객체로 설정한 다음 다시 액세스하면 프록시 버전을 얻게 되며 이는 객체 ID 위험을 초래할 수 있습니다🎜🎜즉, 객체 ID에 의존하는 작업을 수행하지만 동일한 객체의 원래 버전과 프록시 버전을 모두 사용합니다🎜rrreee

요약

🎜ref() 및 reactive()는 비응답형 데이터를 반응형 데이터로 변환하는 반면, toRaw () 및 markRaw()는 동일합니다. 반응형 데이터를 복원하려면 반응형 데이터를 비반응형 데이터로 변환🎜🎜하고 toRaw는 반응형 데이터를 비반응형 데이터로 변환하는 작업과 관련된 경우에만 작동합니다. 순수 데이터 렌더링에만 사용되며 페이지 업데이트를 발생시키지 않습니다. toRaw 또는 markRaw()🎜🎜를 사용하면 종종 데이터 성능을 향상시킬 수 있습니다🎜🎜(학습 동영상 공유: 🎜vuejs 소개 튜토리얼🎜, 🎜기본 프로그래밍 비디오🎜)🎜

위 내용은 Vue 함수 비교: toRaw() 및 markRaw() 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!