VUE 3의 새로운 반응성 시스템 이해

최신 프론트 엔드 프레임 워크의 핵심 구성 요소 중 하나는 반응 형 시스템입니다. 응용 프로그램이 높은 상호 작용, 역동 성 및 응답 성을 달성 할 수있는 Magic Wands입니다. 반응 형 시스템이 무엇인지, 실제로이를 적용하는 방법을 이해하는 것은 모든 웹 개발자에게 중요한 기술입니다.

응답 시스템은 데이터 소스 (모델)와 데이터 표현 (뷰)을 동기화하는 메커니즘입니다. 모델이 변경 될 때마다 이러한 변경 사항을 반영하도록보기가 다시 렌더링됩니다.

간단한 마크 다운 편집기를 예로 들어 봅시다. 일반적으로 마크 다운 코드 (기본 모델 수정)를 쓰는 것이 일반적으로 두 개의 Panes가 있으며, 다른 하나는 컴파일 된 HTML (업데이트 된보기 표시)을 미리보기를위한 것입니다. 글쓰기 창에서 콘텐츠를 작성하면 즉시 미리보기 창에서 자동으로 미리보기입니다. 물론 이것은 단순한 예일뿐입니다. 종종 상황은 훨씬 더 복잡합니다.

대부분의 경우, 우리가 표시하려는 데이터는 다른 데이터에 따라 다릅니다. 이 경우 종속성이 추적되고 그에 따라 데이터가 업데이트됩니다. 예를 들어, FullName 속성이 있다고 가정합니다.이 속성은 FirstName 및 LastName 속성에 따라 다릅니다. 종속성이 수정되면 FullName 속성이 자동으로 다시 계산되고 결과가보기에 표시됩니다.

이제 우리는 응답 성이 무엇인지 결정 했으므로 이제 새로운 Vue 3 응답 메커니즘이 어떻게 작동하는지, 실제로 사용하는 방법을 배울 때입니다. 그러나이 작업을 수행하기 전에 Old Vue 2 반응 메커니즘과 그 단점을 간단히 살펴 보겠습니다. 키 포인트

vue 3은 ES6 프록시를 사용하고 유연성과 기능을 향상시키기 위해 API를 반영하는 완전히 개선 된 응답 시스템을 도입합니다.

VUE 3의 새로운 응답 시스템은 애플리케이션 상태의 변경 사항을 자동으로 추적하고 업데이트하여 MAP 및 SET과 같은보다 복잡한 데이터 구조를 지원합니다.

Vue 3의 ,

및

메소드를 사용하면 개발자가 데이터 응답 성을보다 세분화 할 수 있으며, 여기서

는 기본 유형을위한 것이고

는 객체를위한 것입니다.

및

및 와 같은 고급 응답 API 방법은 종속성과 부작용을 효과적으로 관리하여보다 역동적이고 반응 형 애플리케이션을 만들 수있는 도구를 개발자에게 제공합니다. vue 3은 배열 길이 및 객체 속성에 대한 변경 사항을 감지하는 등 VUE 2 응답 시스템에서 발견 된 제한 사항을 해결합니다.
• VUE 3 반응 형 시스템은 장점이 있지만 ES6 환경에서만 지원되며 응답 형 프록시 및 원래 객체는 신원 비교가 다릅니다.
• 간단히 vue 2 반응 메커니즘 reactive를 탐색하십시오 vue 2의 반응 메커니즘은 다소 "숨겨진"입니다. 우리는 데이터 객체에 무엇이든 넣고 vue는 암시 적으로 반응을 만듭니다. 한편으로, 이것은 개발자의 작업을 단순화하지만 반면에 유연성이 줄어 듭니다. ref무대 뒤에서 vue 2는 es5 object.defineProperty ()를 사용하여 데이터 객체의 모든 속성을

  getter 및 setter 로 변환합니다. 각 구성 요소 인스턴스에 대해 vue는 종속성 관찰자 인스턴스를 만듭니다. 구성 요소 렌더링 중에 종속성으로 수집/추적 된 모든 속성은 관찰자가 기록합니다. 나중에, 종속성의 세터가 발사되면, 관찰자는 구성 요소가 렌즈를 다시 렌더링하고 업데이트한다는 사실을 알린다. 이것은 기본적으로 모든 마법이 작동하는 방식입니다. 불행히도, 알아야 할 것이 몇 가지 있습니다. 탐지 변경을위한 예방 조치 vue는 Object.DefineProperty () 제한으로 인해 특정 데이터 변경을 감지 할 수 없습니다. 여기에는 다음이 포함됩니다

  객체에 속성을 추가/제거하십시오 (예 : obj.newkey = value) 인덱스 별 배열 항목을 설정합니다 (예 : arr [index] = newValue) 배열의 길이를 수정합니다 (예 : arr.length = newlength)

  운 좋게도 이러한 제한 사항을 처리하기 위해 VUE는 VUE.SET API 메소드를 제공하여 응답 형 객체에 속성을 추가하여 새 속성이 반응이 좋으며 뷰 업데이트를 트리거합니다.

  다음 예에서 위의 상황을 탐색합시다.

  위의 예에서는이 세 가지 방법 중 어느 것도 작동하지 않음을 알 수 있습니다. 우리는 사람 객체에 새로운 속성을 추가 할 수 없습니다. 인덱스를 사용하여 활동 배열에서 항목을 편집 할 수 없습니다. 또한 활동 배열의 길이를 수정할 수 없습니다.
  • 물론 이러한 상황에 대한 해결책이 있습니다. 다음 예에서는 탐구 할 것입니다.
  이 예에서는 vue.set api 메소드를 사용하여 사람 객체에 새로운 시대 속성을 추가하고 활동 배열에서 특정 항목을 선택/수정합니다. 마지막 경우, 우리는 JavaScript로 내장 된 Splice () 배열 메소드 만 사용합니다.
  • 우리가 볼 수 있듯이, 이것은 효과가 있지만 약간 어색하고 일관되지 않은 코드베이스로 이어집니다. 다행스럽게도 VUE 3 에서이 문제는 해결되었습니다. 다음 예제에서 그것이 마법의 방법을 봅시다 :
  • 이 ​​예에서 vue 3을 사용하여 첫 번째 예제에 사용 된 내장 JavaScript 기능으로 되돌아 가면 이제 모든 메소드가 올바르게 작동합니다.
  VUE 2.6에서 에서 vue.observable () API 메소드가 도입되었습니다. 응답 형 시스템을 어느 정도 노출시켜 개발자가 명시 적으로 객체를 반응하게 만들 수 있습니다. 실제로 이것은 VUE가 내부적으로 데이터 객체를 래프하는 데 사용하는 것과 동일한 방법이며 간단한 시나리오를 위해 최소한의 교차 구성 요소 상태 저장을 작성하는 데 유용합니다. 그러나 유용하지만,이 단일 접근법은 VUE 3과 함께 제공되는 기능이 풍부한 반응 형 API의 기능과 유연성과 일치하지 않습니다. 다음 섹션에서 이유를 볼 수 있습니다.

  참고 : Object.DefineProperty ()는 ES5 기능이므로 시뮬레이션 할 수 없기 때문에 VUE 2는 IE8 이하를 지원하지 않습니다.

  vue 3 반응 메커니즘은 어떻게 작동합니까

  VUE 3의 반응 형 시스템은 ES6 프록시를 활용하고 API를 반영하도록 완전히 다시 작성되었습니다. 새 버전은 기능이 풍부한 반응 형 API를 보여주는 시스템을 이전보다 유연하고 강력하게 만듭니다.

  Proxy API를 사용하면 개발자가 대상 객체에서 저수준 객체 작업을 가로 채고 수정할 수 있습니다. 프록시는 객체 (

  target

  라고 함)의 클론/래퍼이며 특정 작업에 응답하고 JavaScript의 내장 동작을 덮어 쓰는 특수 함수 ( 트랩 라고 함)를 제공합니다. 사물. 여전히 기본 동작을 사용해야하는 경우 이름에서 알 수 있듯이 프록시 API의 메소드를 반영하는 해당 반사 API를 사용할 수 있습니다. Vue 3 :

  에서 이러한 API가 어떻게 사용되는지 확인하려면 예를 살펴 보겠습니다. 새 프록시를 만들려면 새 프록시 (대상, 핸들러) 생성자를 사용합니다. 두 가지 매개 변수를 허용합니다. 대상 객체 (Person Object)와 핸들러 오브젝트는 어떤 작업 (GET 및 SET 작업)을 차단합니다. 핸들러 객체에서는 속성을 읽을 때 및 속성이 수정/추가 될 때 Get and Set 트랩을 추적합니다. 메소드가 올바르게 작동하는지 확인하기 위해 콘솔 문을 설정했습니다.

  트랩을 가져 와서 설정하십시오 대상 : 대상 객체 프록시 에 의해 포장 된 대상 객체 속성 : 속성 이름 <code class="language-javascript"><div id="app"> <h1>Hello! My name is {{ person.name }}. I'm {{ person.age }} years old.</h1> <button>Add "age" property</button> <p>Here are my favorite activities:</p> <ul> <li v-for="(item, index) in activities" :key="index">{{ item }} <button>Edit</button> </li> </ul> <button>Clear the activities list</button> </div></code> 수신기 : 작업이 수행되는 객체 (일반적으로 프록시) API 메소드를 반영하면 해당 프록시 메소드와 동일한 매개 변수를 허용합니다. 주어진 작업에 대한 기본 동작을 구현하는 데 사용됩니다. Get Trap의 리턴 속성 이름 및 속성이 설정된 경우 True를 반환합니다. 그렇지 않으면 False를 반환합니다.
  주석화 된 track () 및 trigger () 함수는 vue-specific이며 속성을 읽을 때 및 속성이 수정/추가 될 때 추적하는 데 사용됩니다. 결과적으로 Vue는이 속성을 사용하여 코드를 다시 실행합니다.
  예제의 마지막 부분에서는 콘솔 명령문을 사용하여 원래 사람 객체를 출력합니다. 그런 다음 다른 문을 사용하여 프록시 객체의 속성 이름을 읽습니다. 다음으로, 우리는 연령 재산을 수정하고 새로운 취미 속성을 만듭니다. 마지막으로, 사람 객체를 다시 출력하여 올바르게 업데이트되었는지 확인합니다.
  • 이것은 Vue 3 반응 메커니즘에 대한 간단한 설명입니다. 물론 실제 구현은 훨씬 더 복잡하지만 위에서 제공된 예제가 주요 아이디어를 얻을 수 있기를 바랍니다.
  vue 3 반응 메커니즘을 사용할 때 다음 지점을 고려해야합니다.
  • ES6 지원 브라우저에서만 사용할 수 있습니다 반응 형 프록시는 원래 객체
  와 같지 않습니다
  • 탐색 vue 3 응답 API
  마지막으로, 우리는 Vue 3 응답 API 자체로갑니다. 다음 섹션에서는 논리적으로 그룹화 된 API 접근법을 탐색합니다. 이 방법으로 제시하는 것이 더 쉽다고 생각하기 때문에이 방법을 그룹화했습니다. 기본부터 시작합시다.
  기본 방법 첫 번째 그룹에는 데이터 응답을 제어하는 ​​가장 기본적인 방법이 포함되어 있습니다.
  ref는 기본 값 또는 일반 객체를 수락하고 응답적이고 돌연변이 가능한 ref 객체를 반환합니다. ref 객체는 하나의 속성 값 만 가지며,이 값은 기본 값 또는 일반 객체를 가리 킵니다.
  • 반응성은 객체를 받아들이고 객체의 반응 형 사본을 반환합니다. 변환은 깊고 모든 중첩 특성에 영향을 미칩니다.
  RefOnly Ref 또는 Object (정상 또는 응답)를 받아들이고 원래 객체의 읽기 전용 객체를 반환합니다. 변환은 깊고 모든 중첩 특성에 영향을 미칩니다.
  • Markraw는 객체 자체를 반환하여 프록시 객체로 변환되는 것을 방지합니다.
  • 이제이 방법의 실제 적용을 보자.
  이 예에서는 4 가지 기본 반응 방법의 사용을 탐색합니다.
  • 먼저, 값이 0 인 카운터 ref 객체를 만듭니다. 그런 다음보기에서 두 개의 버튼을 배치하여 카운터의 값을 각각 증가 및 감소시킵니다. 이 버튼을 사용할 때 카운터가 실제로 반응이 있음을 알 수 있습니다.
  둘째, 우리는 사람의 반응 형 객체를 만듭니다. 그런 다음 관점에서, 우리는 사람의 이름과 나이를 편집하는 데 사용되는 두 개의 입력 컨트롤을 배치합니다. 인간 속성을 편집하면 즉시 업데이트됩니다.
  셋째, 우리는 수학 읽기 전용 객체를 만듭니다. 그런 다음보기에서 수학의 PI 속성 값을 두 배로 늘리는 버튼을 설정합니다. 그러나 버튼을 클릭하면 콘솔에 오류 메시지가 표시되어 객체가 읽기 전용이며 속성을 수정할 수 없음을 알리는 오류 메시지가 표시됩니다.

  마지막으로, 우리는 프록시로 변환하고 싶지 않은 알파벳 열버 객체를 만들어 원래 객체로 표시합니다. 여기에는 모든 문자와 해당 숫자가 포함되어 있습니다 (간결하게는 여기에 처음 세 글자 만 사용됩니다). 이 순서는 변경되지 않을 가능성이 없으므로이 객체를 고의로 성능에 유리한 일반적인 객체로 유지합니다. 객체 내용을 테이블에서 렌더링하고 B 속성의 값을 3으로 변경하기 위해 버튼을 설정합니다. 우리는 객체

  를 수정할 수 있지만, 이로 인해 뷰가 다시 생성되지는 않습니다.

  <code class="language-javascript"><div id="app">
    <h1>Hello! My name is {{ person.name }}. I'm {{ person.age }} years old.</h1>
    <button>Add "age" property</button>
    <p>Here are my favorite activities:</p>
    <ul>
      <li v-for="(item, index) in activities" :key="index">{{ item }} <button>Edit</button>
  </li>
    </ul>
    <button>Clear the activities list</button>
  </div></code>

  Markraw는 국가 코드, 색상 이름 및 해당 16 진수 수 등의 긴 목록과 같이 응답 할 필요가없는 객체에 적합합니다.

  마지막으로, 다음 섹션에 설명 된 유형 확인 방법을 사용하여 생성 한 각 객체의 유형을 테스트하고 결정합니다. OnMounted () 수명주기 후크를 사용하여 응용 프로그램이 처음 렌더링 될 때 이러한 점검을 트리거합니다.

  유형 검사 방법

  이 그룹에는 위에서 언급 한 4 가지 유형의 체커가 모두 포함되어 있습니다.

  ISREF는 값이 ref 객체인지 여부를 확인합니다.

  ISREACITIVE 객체가 반응성에 의해 생성 된 반응성 프록시인지 또는 반응성에 의해 생성 된 다른 프록시를 준비하여 생성되는지 확인합니다.

  iSReadOnly 객체가 ReadOnly가 작성한 읽기 전용 프록시인지 확인합니다.

  isproxy는 객체가 반응성 또는 준비 적으로 생성 된 프록시인지 여부를 확인합니다.

  더 많은 참조 메소드 이 그룹에는 다른 참조 방법이 포함되어 있습니다

  unref는 ref.의 값을 반환합니다.
  • TriggerRef는 수동으로 얕은 영향을 미칩니다.
  CustomRef는 종속성 추적 및 업데이트 트리거링을 명시 적으로 제어하여 사용자 정의 심판을 만듭니다.
  얕은 방법 이 그룹의 방법은 Ref, Reftive 및 Readonly의 "얕은"등가물입니다.
  • 샬로프는 값을 반응하지 않고 값 속성 만 추적하는 심판을 만듭니다.
  얕은 반응은 자체 특성 만 추적하고 중첩 된 물체를 포함하지 않는 반응 형 프록시를 만듭니다.
  ShallowReadonly는 중첩 된 객체를 제외하고 자체 특성 만 읽기 전용으로 만 읽기 전용 프록시를 만듭니다.
  다음 예를 살펴보면이 방법을 더 쉽게 이해해 보자.

  이 예제는 얕은 ref 객체를 설정하는 것으로 시작합니다. 그런 다음보기에서 폭과 높이 특성을 편집하기 위해 두 개의 입력 컨트롤을 추가합니다. 그러나 우리가 그것들을 수정하려고 할 때, 우리는 그것들이 업데이트되지 않았다는 것을 알 수 있습니다. 이 문제를 해결하기 위해 전체 객체와 모든 속성을 변경하는 버튼을 추가합니다. 이제 작동합니다. 이는 값의 내용 (단일 속성으로서의 너비 및 높이)이 반응 형 객체로 변환되지 않지만 값 (전체 객체)의 변화가 여전히 추적되기 때문입니다.

  다음으로, 우리는 너비와 높이 특성과 x 및 y 특성을 포함하는 중첩 코디 객체를 포함하는 Settingsa 얕은 반응성 프록시를 만듭니다. 그런 다음보기에서 각 속성에 대한 입력 제어를 설정합니다. 너비와 높이 특성을 수정하면 반응 적으로 업데이트된다는 것을 알 수 있습니다. 그러나 x 및 y 속성을 수정하려고 할 때 추적되지 않은 것을 알 수 있습니다.
  마지막으로, 우리는 settingsa와 동일한 속성을 갖는 settingsb 얕은 객체를 만듭니다. 여기서는 너비 또는 높이 속성을 수정하려고 할 때 콘솔에 오류 메시지가 나타납니다. 객체가 읽기 전용이고 속성을 수정할 수 없음을 알려줍니다. 반면에 X 및 Y 속성은 아무런 문제없이 수정 될 수 있습니다.
  • 중첩 코디스 객체 마지막 두 예제의 객체는 변환의 영향을받지 않으며 정상 객체로 유지됩니다. 이것은 자유롭게 수정할 수 있음을 의미하지만 VUE는 수정을 추적하지 않습니다.
  변환 메소드
  • 다음 세 가지 방법은 프록시를 참조 또는 일반 객체로 변환하는 데 사용됩니다.
  Toref는 소스 응답 객체의 속성에 대한 Ref를 생성합니다. REF는 소스 속성에 대한 반응 형 연결을 유지합니다.
  • torefs는 반응 형 객체를 일반 객체로 변환합니다. 일반 객체의 각 속성은 원래 객체의 해당 속성을 가리키는 심판입니다.
  Toraw는 응답 또는 읽기 전용 프록시의 원래 일반 객체를 반환합니다.

  다음 예에서 이러한 전환이 어떻게 작동하는지 보자.

  이 예에서는 먼저 소스 객체로 사용할 기본 사람 응답 객체를 만듭니다.

  <code class="language-javascript"><div id="app">
    <h1>Hello! My name is {{ person.name }}. I'm {{ person.age }} years old.</h1>
    <button>Add "age" property</button>
    <p>Here are my favorite activities:</p>
    <ul>
      <li v-for="(item, index) in activities" :key="index">{{ item }} <button>Edit</button>
  </li>
    </ul>
    <button>Clear the activities list</button>
  </div></code>

  그런 다음 우리는 사람의 이름 속성을 같은 이름의 심판으로 변환합니다. 그런 다음, 우리는 두 개의 입력 컨트롤 (이름 참조, 다른 사람의 이름 속성)을 추가합니다. 우리가 그들 중 하나를 수정하면, 다른 하나는 그에 따라 업데이트되므로 그들 사이의 반응 형 연결이 유지됩니다.

  다음, 우리는 사람의 모든 속성을 Persondetails 객체에 포함 된 단일 수진으로 변환합니다. 그런 다음보기에서 방금 만든 심판을 테스트하기 위해 두 개의 입력 컨트롤을 다시 추가합니다. 우리가 볼 수 있듯이, Persondetails의 나이는 이전 예에서와 같이 사람의 연령 재산과 완전히 동기화됩니다.

  마지막으로, 우리는 사람의 반응 형 객체를 Rawperson 일반 객체로 변환합니다. 그런 다음, 우리는 Rawperson의 취미 속성을 편집하기 위해 입력 컨트롤을 추가합니다. 그러나 우리가 볼 수 있듯이 Vue는 변환 된 객체를 추적하지 않습니다.

  계산 및 시계 메소드 마지막 방법 세트는 복잡한 값을 계산하고 "모니터"특정 값을 계산하는 데 사용됩니다.

  계산 된 것은 getter 기능을 인수로 받아들이고 불변의 반응 형 Ref 객체를 반환합니다.

  WatchEffect는 즉시 함수를 실행하고 응답 적으로 종속성을 추적하고 종속성이 변경되면 재실행합니다.

  시계는 이것과 정확히 동일합니다. $ 옵션 API의 시계 및 해당 시계 옵션. 모니터링 된 소스가 변경 될 때 특정 데이터 소스를 모니터링하고 콜백 함수에서 부작용을 적용하고 있습니다.
  다음 예를 고려해 봅시다 :

  이 예에서는 FirstName 및 LastName Ref를 기반으로 계산되는 FullName Computed 변수를 만듭니다. 그런 다음보기에서 전체 이름의 두 부분을 편집하기 위해 두 개의 입력 컨트롤을 추가합니다. 볼 수 있듯이 부품을 수정하면 풀 이름이 다시 계산되고 결과가 업데이트됩니다.

  다음으로 볼륨 심판을 만들고 시계 효과를 설정합니다. 볼륨이 수정 될 때마다 효과는 콜백 함수를 실행합니다. 이를 증명하기 위해 볼 때 볼륨을 1 씩 증가시키는 버튼을 추가합니다. 콜백 함수에서 조건을 설정하여 볼륨 값을 3으로 나눌 수 있는지 테스트합니다. true를 반환하면 경고 메시지가 표시됩니다. 응용 프로그램이 시작될 때 효과는 한 번 실행되고 볼륨 값을 설정 한 다음 볼륨 값이 수정 될 때마다 다시 실행됩니다.
  마지막으로, 우리는 State Ref를 생성하고 변경 기능을 설정하여 변경 사항을 추적합니다. 상태가 변경되면 콜백 함수가 실행됩니다. 이 예에서는 재생과 일시 정지 사이에 상태를 전환하기 위해 버튼을 추가합니다. 이런 일이 발생할 때마다 경고 메시지가 표시됩니다.
  • Watcheffect와 Watch는 기능 측면에서 매우 유사하게 보이지만 명백한 차이점이 있습니다.
    WatchEffect 콜백 함수에 포함 된 모든 반응 형 속성을 종속성으로 취급합니다. 따라서 콜백에 세 가지 속성이 포함 된 경우 변경 사항을 암시 적으로 추적합니다.
    • 시계는 콜백에 매개 변수로 포함 된 속성 만 추적합니다. 또한 모니터링 속성의 이전 및 현재 값을 제공합니다.
    • 보시다시피 VUE 3 Responsive API는 다양한 사용 사례에서 사용할 수있는 광범위한 방법을 제공합니다. API는 매우 크며이 자습서에서는 기본 사항 만 탐색합니다. 보다 심층적 인 탐색, 세부 사항 및 엣지 케이스를 보려면 응답 형 API 문서를 방문하십시오.
    결론 이 기사에서는 반응 형 시스템이 무엇인지, VUE 2 및 VUE 3에서 어떻게 구현할 수 있는지 소개합니다. 우리는 Vue 2가 Vue 3에서 성공적으로 해결 된 몇 가지 단점이 있음을 알 수 있습니다. VUE 3 응답 메커니즘은 최신 JavaScript 기능을 기반으로 한 완전한 재 작성입니다. 장단점을 요약합시다.
    프로 :

    독립형 패키지로 사용할 수 있습니다. 예를 들어, React와 함께 사용할 수 있습니다.

    기능이 풍부한 API 덕분에 유연성과 기능을 더 많이 제공합니다.

    는 더 많은 데이터 구조 (MAP, 약점, 세트, ​​약점)를 지원합니다.

    더 잘 수행됩니다. 필요한 데이터 만 응답합니다.

    VUE 2의 데이터 작동 고려 사항이 해결되었습니다.

    단점 :
    • ES6 지원 브라우저에서만 사용할 수 있습니다.
    정체성 비교 (===)의 관점에서 반응 프록시는 원래 객체와 같지 않습니다.
    • VUE 2의 "자동"응답 메커니즘보다 더 많은 코드가 필요합니다.
    • 결론은 VUE 3 응답 메커니즘이 VUE 및 비 vue 개발자 모두가 사용할 수있는 유연하고 강력한 시스템이라는 것입니다. 당신의 상황이 무엇이든간에, 그냥 잡고 놀라운 것을 만들기 시작하십시오.
    vue 3 반응 형 시스템 FAQ (FAQ) vue 3 반응 시스템이란 무엇입니까?
    • vue 3 반응 형 시스템은 인기있는 JavaScript 프레임 워크 인 vue.js의 기본 측면입니다. 이러한 변경 사항을 반영하기 위해 응용 프로그램 상태의 변경 사항을 추적하고 DOM (문서 개체 모델)을 업데이트 할 책임이 있습니다. 이 시스템은 "반응 형 객체"의 개념을 중심으로 구축되었습니다. 이러한 객체의 속성이 변경되면 VUE는 필요한 업데이트를 자동으로 트리거합니다. 이를 통해 개발자가 동적이고 반응이 좋은 웹 애플리케이션을보다 쉽게 ​​구축 할 수 있습니다.
    vue 3 반응 시스템은 Vue 2와 어떻게 다릅니 까?
    • vue 3의 응답 시스템은 JavaScript의 프록시 객체를 사용하여 완전히 다시 작성하여 VUE 2의 Object.DefineProperty 메소드와 비교하여 변경 사항을 추적하는보다 효율적이고 강력한 방법을 제공합니다. 이 새로운 시스템을 사용하면 VUE가 VUE 2의 한계 인 중첩 특성의 변경 사항을 추적 할 수 있습니다. 또한 메모리 발자국을 줄이고 성능을 향상시킵니다.
    내 응용 프로그램에서 Vue 3 응답 시스템을 사용하는 방법은 무엇입니까?
    vue 3 응답 시스템을 사용하려면 Reactive () 함수를 사용하여 데이터를 랩핑해야합니다. 이 함수는 객체와 그 속성을 반응합니다. 속성이 변경되면 VUE는 자동으로 구성 요소에 의존합니다. ref () 함수를 사용하여 단일 변수 응답을 만들 수도 있습니다.

    vue 3 반응 메커니즘에서 심판 함수의 역할은 무엇입니까?

    VUE 3에서 반응성과 심판의 차이점은 무엇입니까?

    reactive () 및 ref ()는 모두 VUE 3에서 데이터를 반응하는 데 사용되지만 다른 시나리오에서 사용됩니다. Reftive () 함수는 객체 응답을 만드는 데 사용되는 반면 ref () 함수는 문자열 또는 숫자 반응과 같은 기본 값을 만드는 데 사용됩니다. 그러나 ref ()는 객체와 함께 사용될 수 있으며,이 경우 reactive ()와 유사하게 동작합니다.

    vue 3 배열의 응답 성을 다루는 방법?

    vue 3 배열의 응답 성은 객체를 처리하는 것과 동일합니다. reactive () 함수를 사용하여 배열을 응답하면 VUE 트랙이 배열 요소 및 길이를 변경합니다. 즉, 요소를 추가, 삭제 또는 교체하면 VUE가 해당 배열에 의존하는 구성 요소를 업데이트합니다.

    반응 메커니즘에서 Torefs 기능은 무엇입니까?

    vue 3의 Torefs () 함수는 반응 형 객체를 일반 객체로 변환하는 데 사용됩니다. 여기서 원래 객체의 각 속성은 참조로 표시됩니다. 반응 형 객체를 해체하려고하지만 여전히 반응을 유지할 때 유용합니다.

위 내용은 VUE 3의 새로운 반응성 시스템 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!