vue3의 ref, toRef, toRefs에 대해 이야기하는 기사
- 青灯夜游앞으로
- 2023-04-13 17:32:561935검색
이 글은 vue3 프로젝트에서 ref, toRef, toRefs의 사용에 대해 심도 있게 이야기할 것입니다. 모두에게 도움이 되기를 바랍니다!
1. ref
ref 함수는 간단한 데이터 유형을 반응형 데이터로 래핑할 수 있습니다(복잡한 유형도 사용할 수 있음). JS에서 값을 연산할 때는 . 템플릿의 value 속성은 평소대로 사용하세요.
예:
- ref는 기본 유형 데이터를 팩합니다.
App.vue
<template>
<div>
<div>{{ name }}</div>
<button>修改数据</button>
</div></template><script>
import { ref } from 'vue'
export default {
name: 'App',
setup() {
const name = ref('初映')
const updateName = () => {
name.value = '初映CY的前说'
}
return { name, updateName }
},
}</script>
작성 방법은 Reactive()와 동일하지만 js에서 작성할 때 추가로 .value를 추가해야 함을 알 수 있습니다. . [관련 권장 사항: vuejs 비디오 튜토리얼, 웹 프론트 엔드 개발]
- ref 패키징 복잡한 클래스 유형 데이터
참고: 일반적으로 데이터 유형이 결정되지 않은 경우 ref는 실제로 복잡한 데이터 유형을 반응형 데이터로 래핑할 수 있습니다. 백엔드에서 반환되는 데이터와 같은 ref를 사용하는 것이 좋습니다.
<template>
<div>
<div>{{ data?.name }}</div>
<button>修改数据</button>
</div></template><script>
import { ref } from 'vue'
export default {
name: 'App',
setup() {
// 初始值是 null
const data = ref(null)
setTimeout(() => {
// 右边的对象可能是后端返回的
data.value = {
name: '初映',
}
}, 1000)
const updateName = () => {
data.value.name = 'CY'
}
return { data, updateName }
},
}</script>
- 어떻게 선택하나요?
ref() 및 반응성()은 Vue.js3.0에서 제공되는 두 가지 반응형 API입니다.
ref()는 주로 반응형 데이터를 생성하는 데 사용됩니다. 일반 JavaScript 개체를 반응형 개체로 변환하므로 데이터가 변경되면 Vue 인스턴스가 자동으로 관련 뷰를 업데이트합니다. . ref()로 생성된 반응형 데이터는 .value 속성을 통해 액세스하고 수정할 수 있습니다.
반응성()은 주로 여러 값을 포함하는 상태 객체로 사용할 수 있는 반응성 객체를 생성하는 데 사용되며 일반적으로 복잡한 상태를 관리하는 데 사용됩니다. 일반 JavaScript 객체를 반응형 객체로 변환할 수 있으며 중첩 속성이 변경되더라도 Vue 인스턴스에서 추적됩니다. 반응형 객체의 속성이 변경되면 Vue는 관련 뷰를 자동으로 업데이트합니다.
감싸야 할 것이 객체라는 것을 확실히 알 때, 다른 경우에는 ref를 사용하는 것이 좋습니다.
Vue3.2 이후에는 ref를 사용하는 것이 더 권장되고 성능이 크게 향상되었습니다.
2. toRef
toRef 함수의 역할 : 반응형 객체의 특정 속성을 별도의 반응형 데이터로 변환하고, 변환된 값은 이전 값과 연관됩니다. (ref 함수도 변환 가능) , 그러나 값은 관련이 없음).
먼저 다음 예를 살펴보겠습니다.
<template>
<div>
<h2>name: {{ obj.name }} age: {{obj.age}}</h2>
<button>修改数据</button>
</div></template><script>
import { reactive } from 'vue'
export default {
name: 'App',
setup() {
const obj = reactive({
name: '初映',
age: 18,
address: '江西',
sex: '男',
})
const updateName = () => {
obj.name = '初映CY的前说'
}
return { obj, updateName }
},
}</script>
이런 방식으로 작성하면 데이터가 반응형 데이터로 변경될 수도 있지만 두 가지 문제가 발생합니다.
문제 1: 이를 얻으려면 템플릿에서 Obj를 사용해야 합니다. . 데이터, 문제.
문제 2: 템플릿에 이름과 나이만 사용했음에도 불구하고 전체 obj를 내보내므로 불필요하고 성능이 낭비됩니다.
<template>
<div>
<h2>name: {{ name }} </h2>
<button>修改数据</button>
</div></template><script>
import { reactive,toRef } from 'vue'
export default {
name: 'App',
setup() {
const obj = reactive({
name: '初映',
age: 18,
address: '江西',
sex: '男',
})
const name = toRef(obj, 'name')
const updateName = () => {
obj.name = '初映CY的前说'
}
return { name, updateName }
},
}</script>
이런 방식으로 필요한 데이터를 반환할 수 있어 성능과 템플릿 작성이 절약되며 '요청 시 가져오기'
3. toRefs 함수 기능: 반응형 개체의 모든 속성을 별도의 반응형 데이터로 변환하고, 변환된 값은 이전 값과 연관됩니다. <template>
<div>
<h2>{{ name }} {{ age }}</h2>
<button>修改数据</button>
</div></template><script>
import { reactive, toRefs } from 'vue'
export default {
name: 'App',
setup() {
const obj = reactive({
name: '初映',
age: 10,
})
const updateName = () => {
obj.name = '初映CY的前说'
obj.age = 18
}
return { ...toRefs(obj), updateName }
},
}</script>
toRefs는 모든 반응형 데이터를 반환합니다. 그런 다음 데이터 이름을 직접 사용하세요. oh
data. 더 이상 고민하지 말고 이 세 가지 방법을 사용하는 방법과 반응형의 차이점을 알아봅시다.
,vuejs 입문 튜토리얼
(학습 영상 공유:
기본 프로그래밍 영상)
위 내용은 vue3의 ref, toRef, toRefs에 대해 이야기하는 기사의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!