이 글은 vue3 프로젝트에서 ref, toRef, toRefs의 사용에 대해 심도 있게 이야기할 것입니다. 모두에게 도움이 되기를 바랍니다!
ref 함수는 간단한 데이터 유형을 반응형 데이터로 래핑할 수 있습니다(복잡한 유형도 사용할 수 있음). JS에서 값을 연산할 때는 . 템플릿의 value 속성은 평소대로 사용하세요.
예:
<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 비디오 튜토리얼, 웹 프론트 엔드 개발]
<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>
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>이런 방식으로 필요한 데이터를 반환할 수 있어 성능과 템플릿 작성이 절약되며 '요청 시 가져오기'
<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>
data. 더 이상 고민하지 말고 이 세 가지 방법을 사용하는 방법과 반응형의 차이점을 알아봅시다.
,vuejs 입문 튜토리얼
(학습 영상 공유:
기본 프로그래밍 영상)
위 내용은 vue3의 ref, toRef, toRefs에 대해 이야기하는 기사의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
