vue3의 ref, toRef, toRefs에 대해 이야기하는 기사

이 글은 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 &#39;vue&#39;
  export default {
      name: &#39;App&#39;,
      setup() {
          const name = ref(&#39;初映&#39;)
          const updateName = () => {
              name.value = &#39;初映CY的前说&#39;
          }
          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 &#39;vue&#39;
    export default {
        name: &#39;App&#39;,
        setup() {
            // 初始值是 null
            const data = ref(null)
            setTimeout(() => {
                // 右边的对象可能是后端返回的
                data.value = {
                    name: &#39;初映&#39;,
                }
            }, 1000)
            const updateName = () => {
                data.value.name = &#39;CY&#39;
            }
            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 id="name-obj-name-age-obj-age">name: {{ obj.name }} age: {{obj.age}}</h2>
      <button>修改数据</button>
  </div></template><script>
  import { reactive } from &#39;vue&#39;
  export default {
      name: &#39;App&#39;,
      setup() {
          const obj = reactive({
              name: &#39;初映&#39;,
              age: 18,
              address: &#39;江西&#39;,
              sex: &#39;男&#39;,
          })
          const updateName = () => {
              obj.name = &#39;初映CY的前说&#39;
          }
          return { obj, updateName }
      },
  }</script>

이런 방식으로 작성하면 데이터가 반응형 데이터로 변경될 수도 있지만 두 가지 문제가 발생합니다.

• 문제 1: 이를 얻으려면 템플릿에서 Obj를 사용해야 합니다. . 데이터, 문제.

• 문제 2: 템플릿에 이름과 나이만 사용했음에도 불구하고 전체 obj를 내보내므로 불필요하고 성능이 낭비됩니다.

<template>
  <div>
      <h2 id="name-name">name: {{ name }} </h2>
      <button>修改数据</button>
  </div></template><script>
  import { reactive,toRef  } from &#39;vue&#39;
  export default {
      name: &#39;App&#39;,
      setup() {
          const obj = reactive({
              name: &#39;初映&#39;,
              age: 18,
              address: &#39;江西&#39;,
              sex: &#39;男&#39;,
          })
          const name = toRef(obj, &#39;name&#39;)
          const updateName = () => {
              obj.name = &#39;初映CY的前说&#39;
          }
          return { name, updateName }
      },
  }</script>

이런 방식으로 필요한 데이터를 반환할 수 있어 성능과 템플릿 작성이 절약되며 '요청 시 가져오기'

3. toRefs 함수 기능: 반응형 개체의 모든 속성을 별도의 반응형 데이터로 변환하고, 변환된 값은 이전 값과 연관됩니다.

<template>
  <div>
      <h2 id="name-age">{{ name }} {{ age }}</h2>
      <button>修改数据</button>
  </div></template><script>
  import { reactive, toRefs } from &#39;vue&#39;
  export default {
      name: &#39;App&#39;,
      setup() {
          const obj = reactive({
              name: &#39;初映&#39;,
              age: 10,
          })
          const updateName = () => {
              obj.name = &#39;初映CY的前说&#39;
              obj.age = 18
          }
          return { ...toRefs(obj), updateName }
      },
  }</script>

toRefs는 모든 반응형 데이터를 반환합니다. 그런 다음 데이터 이름을 직접 사용하세요. oh

data. 더 이상 고민하지 말고 이 세 가지 방법을 사용하는 방법과 반응형의 차이점을 알아봅시다.

(학습 영상 공유:

vuejs 입문 튜토리얼

,

기본 프로그래밍 영상)

위 내용은 vue3의 ref, toRef, toRefs에 대해 이야기하는 기사의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!