기술나눔

반응형 ref() 및 반응형()

2024-07-08

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina


참조()

  • 효과: 반응형 변수를 정의합니다.

  • 문법:let xxx=ref(초기값).

  • 반환 값: ref 객체 또는 ref라고 하는 RefImpl의 인스턴스 객체입니다. ref 객체의 value 속성은 반응형입니다.

  • 조심하세요

    1. JS의 작업 데이터에는 xxx.value가 필요하지만 템플릿에는 .value가 필요하지 않으며 직접 사용하면 됩니다.
    2. let name =ref('Zhang San')의 경우 name은 응답하지 않고 name.value는 응답합니다.

반응형()

  • 효과: 반응형 객체를 정의합니다(기본 유형에는 사용하지 말고 ref를 사용하세요. 그렇지 않으면 오류가 보고됩니다).

  • 문법:반응형 객체 = 반응형(소스 객체)로 설정합니다.

  • 반환 값: 반응형 객체라고 불리는 Proxy의 인스턴스 객체입니다.

  • 조심하세요: 반응성으로 정의된 반응형 데이터는 "깊다".

심판 대 반응성

  • 거시적 관점에서 보면:
    1. ref는 기본 유형 데이터, 객체 유형 데이터를 정의하는 데 사용됩니다.
    2. 반응형은 객체 유형 데이터를 정의하는 데 사용됩니다.
  • 차이점:
    1. ref로 생성된 변수는 값을 사용해야 합니다(volar 플러그인을 사용하여 자동으로 값을 추가할 수 있음).
    2. Reactive는 새 객체를 재할당하고 응답성을 잃게 됩니다(0object.ass를 사용하여 전체적으로 교체할 수 있습니다).
  • 사용 원리:
    1. 기본 유형의 반응형 데이터가 필요한 경우 ref를 사용해야 합니다.
    2. 반응형 개체가 필요한 경우 계층 구조가 깊지 않아 ref 또는 반응형을 사용할 수 있습니다.
    3. 깊은 계층 구조를 가진 반응형 객체가 필요한 경우 반응형을 사용하는 것이 좋습니다.

toRef 및 toRef

효과: 반응형 개체의 각 속성을 참조 개체로 변환합니다.
주목: toRefs는 toRef와 동일한 기능을 가지고 있지만 toRefs는 일괄 변환이 가능합니다.
구문은 다음과 같습니다.

import {reactive,toRefs,toRef} from
// 数据
let person = reactive({
	name:'张三
	age:18
})
let {name,age} = toRefs(person)
let nl = toRef(person,'age')