Vue에서 로컬 스터리지를 반응하는 방법

Vue.js의 반응 형 시스템은 그 핵심 강점 중 하나이지만 근본적인 메커니즘을 이해하지 못하는 사람에게는 신비감을 느낄 수 있습니다. 예를 들어, 왜 객체와 어레이에서 작동하지만 LocalStorage와 같은 다른 것들에서는 작동하지 않습니까? 이 기사는이 질문에 대답하고 Vue의 반응 형 시스템이 LocalStorage와 함께 작동하는 방법을 보여줍니다.

다음 코드를 실행하면 카운터가 정적 값으로 표시되며 LocalStorage의 간격 변경으로 인해 예상대로 변경되지 않습니다.

 새로운 vue ({
  EL : "#Counter",
  데이터 : () => ({
    카운터 : LocalStorage.getItem ( "카운터")
  }),
  계산 : {
    심지어() {
      counter % 2 == 0;
    }
  },
  템플릿 :`<div>
    <div>카운터 : {{counter}}</div>
    <div>카운터는 {{심지어? '심지어': '홀수'}}</div>
  </div>`
});

 // some-orther-file.js
setInterval (() => {
  const counter = localstorage.getItem ( "counter");
  LocalStorage.setItem ( "카운터", 카운터 1);
}, 1000);

VUE 인스턴스 내의 counter 속성은 반응이 좋지만 LocalStorage에서 소스를 변경했기 때문에 변경되지 않습니다.

이 문제를 해결하는 방법에는 여러 가지가 있으며 가장 좋은 방법은 Vuex를 사용하고 저장된 값을 LocalStorage와 동기화하는 것입니다. 그러나이 예에서와 같이 단순한 솔루션이 필요한 경우 어떻게해야합니까? 우리는 Vue의 반응 형 시스템이 어떻게 작동하는지에 대한 심층적 인 이해가 있어야합니다.

Vue의 대응 성

VUE가 구성 요소 인스턴스를 초기화하면 data 옵션이 관찰됩니다. 즉, data 의 모든 속성을 반복하여 Object.defineProperty 사용하여 Getter/Setter로 변환합니다. Vue는 각 속성에 대한 사용자 정의 세터를 설정함으로써 속성이 언제 변경되는시기를 알 수 있으며 변경에 반응 해야하는 종속성에 알릴 수 있습니다. 특정 속성에 어떤 종속성이 의존하는지 어떻게 알 수 있습니까? getters를 활용하면 계산 된 속성, 관찰자 ​​기능 또는 렌더링 기능에 액세스 데이터 속성에 액세스 할 때 등록 할 수 있습니다.

 // core/instance/state.js
함수 initData () {
  // ...
  관찰 (데이터)
}

 // Core/Observer/Index.js
내보내기 기능 관찰 (값) {
  // ...
  새로운 관찰자 (가치)
  // ...
}

수출 클래스 관찰자 {
  // ...
  생성자 (값) {
    // ...
    this.walk (가치)
  }

  산책 (obj) {
    const keys = object.keys (obj)
    for (i = 0; i <keys.length i><p> 그렇다면 왜 LocalStorage가 반응하지 않습니까? <strong>속성이있는 객체가 아니기 때문입니다.</strong></p>
<p> 하지만 기다려. 우리는 어레이가있는 getter와 setter를 정의 할 수 없지만 VUE에서는 어레이가 여전히 반응합니다. 배열은 VUE의 특별한 경우이기 때문입니다. 반응 형 어레이를 사용하려면 Vue는 배열 메소드를 장면 뒤에 다시 작성하여 VUE의 반응 형 시스템과 통합했습니다.</p>
<p> LocalStorage와 비슷한 일을 할 수 있습니까?</p>
<h3 id="LocalStorage-기능을-다시-작성하십시오"> LocalStorage 기능을 다시 작성하십시오</h3>
<p> 먼저 LocalStorage 메소드를 재정의하여 초기 예제를 수정하여 LocalStorage 프로젝트를 요청한 구성 요소 인스턴스를 추적 할 수 있습니다.</p>
<p> // LocalStorage Project Key와 그에 의존하는 VUE 인스턴스 목록 사이에 MAP STROYITEMSUBSCRIPERS = {};</p>
<p> const getitem = window.localstorage.getItem; localStorage.getItem = (키, 대상) => {console.info ( "getse", key);</p>
<p> // 종속 vue 인스턴스를 수집 if (! storeitemsubscribers [key]) storeitemsubscribers [key] = []; if (target) storeitemsubscribers [key] .push (target);</p>
<p> // 원래 함수를 호출하십시오 return getItem.call (localStorage, key); };</p>
<p> const setitem = window.localstorage.setitem; localStorage.setitem = (키, 값) => {console.info ( "setting", key, value);</p>
<p> // if (storeItemSubScriber [key]) {storeItemSubScriber [key] .foreach ((dep) => {if (dep.HasOwnProperty (key)) dep [key] = value;})에 의존하는 vue 인스턴스의 값을 업데이트합니다. }</p>
<p> // 원래 함수 setitem.call (localStorage, key, value)을 호출합니다. };</p>
<p> // ... (코드의 나머지 부분은 원본 텍스트와 동일합니다)</p>
<p> 이 예에서는 <code>getItem</code> 및 <code>setItem</code> 재정의하여 LocalStorage 프로젝트에 의존하는 구성 요소를 수집하고 알려줍니다. 새로운 <code>getItem</code> 에서 우리는 어떤 구성 요소 요청을 녹음하고, <code>setItem</code> 에서는 항목을 요청하는 모든 구성 요소에 문의하고 데이터 속성을 다시 작성합니다.</p>
<p> 위의 코드가 작동하려면 구성 요소 인스턴스에 대한 참조를 <code>getItem</code> 으로 전달하여 기능 서명을 변경해야합니다. 더 이상 화살표 기능을 사용할 수 없습니다. 그렇지 않으면 올바른 <code>this</code> 이 없습니다.</p>
<p> 우리가 더 잘하고 싶다면 더 깊이 파어야합니다. 예를 들어, 의존성을 명시 적으로 전달하지 않고 어떻게 추적 할 수 있습니까?</p>
<h3 id="VUE에서-종속성을-수집하는-방법"> VUE에서 종속성을 수집하는 방법</h3>
<p> 영감을 얻기 위해 Vue의 반응 형 시스템으로 돌아갈 수 있습니다. 데이터 속성에 액세스 할 때 데이터 속성의 getter는 발신자에게 해당 속성을 추가로 변경하도록 가입합니다. 그러나 누가 전화를했는지 어떻게 알 수 있습니까? 데이터 속성을 얻을 때 Getter 기능에는 발신자가 누구인지에 대한 입력이 없습니다. Getter 기능에는 입력이 없습니다. 누가 종속성으로 등록 해야하는지 어떻게 알 수 있습니까?</p>
<p> 각 데이터 속성은 <code>Dep</code> 클래스에서 반응 해야하는 종속성 목록을 유지합니다. 이 클래스를 더 깊이 파고 들면 종속성이 등록 될 때마다 종속성 자체가 이미 정적 목표 변수에 정의되어 있음을 알 수 있습니다. 이 목표는 지금까지 신비한 <code>Watcher</code> 수업에 의해 설정됩니다. 실제로, 데이터 속성이 변경되면, 이러한 관찰자는 실제로 구성 요소의 재 렌더링을 시작하거나 계산 된 속성의 재 컴퓨팅을 시작한다는 알림을받습니다.</p>
<p> 그러나 다시, 그들은 누구입니까?</p>
<p> VUE가 데이터 옵션을 관찰 할 수있게하면 각 계산 된 속성 함수에 대한 관찰자와 모든 관측 기능 ( <code>Watcher</code> 클래스와 혼동되지 않아야 함) 및 각 구성 요소 인스턴스의 렌더링 기능을 만듭니다. 관찰자는 이러한 기능의 동반자와 같습니다. 그들은 두 가지 주요 일을합니다.</p>
<ol>
<li> <strong>그들은 창조 시간에 기능을 평가합니다.</strong> 이것은 종속성 모음을 유발합니다.</li>
<li> <strong>그들이 의존하는 값이 변경되었음을 알리면 기능을 다시 시작합니다.</strong> 이것은 결국 계산 된 속성을 다시 계산하거나 전체 구성 요소를 재 렌더링합니다.</li>
</ol>
<p> 관찰자가 책임있는 기능을 호출하기 전에 중요한 단계가 발생합니다. <strong><code>Dep</code> 클래스의 정적 변수의 목표로 스스로를 설정합니다.</strong> 이를 통해 응답 형 데이터 속성에 액세스 할 때 종속성으로 등록됩니다.</p>
<h3 id="누가-LocalStorage라고-불렀는지-추적하십시오"> 누가 LocalStorage라고 불렀는지 추적하십시오</h3>
<p> 우리는 Vue의 내부 메커니즘에 액세스 할 수 없기 때문에 완전히 할 수 없습니다. 그러나 VUE 아이디어를 사용하여 관찰자가 책임있는 함수를 호출하기 전에 정적 속성에 대상을 설정할 수 있습니다. LocalStorage를 호출하기 전에 구성 요소 인스턴스에 대한 참조를 설정할 수 있습니까?</p>
<p> 데이터 옵션을 설정할 때 LocalStorage가 호출된다고 가정하면, 우리는 <code>beforeCreate</code> 하고 <code>created</code> 위해 연결할 수 있습니다. 이 두 후크는 데이터 옵션을 초기화하기 전후에 발사되므로 데이터 옵션을 설정 한 다음 현재 구성 요소 인스턴스를 참조하여 대상 변수를 지울 수 있습니다 (Lifecycle Hook에서 액세스 할 수 있음). 그런 다음 커스텀 게터 에서이 목표를 종속성으로 등록 할 수 있습니다.</p>
<p> 우리가해야 할 마지막 일은이 수명주기를 모든 구성 요소의 일부로 만드는 것입니다. 전체 프로젝트를 위해 Global Mixin을 사용하여이를 수행 할 수 있습니다.</p>
<p> // ... (코드의 나머지 부분은 원본 텍스트와 동일합니다)</p>
<p> 이제 초기 예제를 실행하면 초당 숫자를 증가시키는 카운터가 나타납니다.</p>
<p> // ... (코드의 나머지 부분은 원본 텍스트와 동일합니다)</p>
<h3 id="우리의-사고-실험의-끝"> 우리의 사고 실험의 끝</h3>
<p> 우리가 초기 문제를 해결했지만, 이것은 주로 사고 실험이라는 것을 기억하십시오. 삭제 된 프로젝트 처리 및 제거되지 않은 구성 요소 인스턴스와 같은 일부 기능이 부족합니다. 또한 구성 요소 인스턴스의 속성 이름이 LocalStorage에 저장된 프로젝트 이름과 동일 해야하는 것과 같은 일부 제한 사항이 있습니다. 즉, 주요 목표는 Vue Responsive Systems가 무대 뒤에서 어떻게 작동하는지 더 잘 이해하고 최대한 활용하는 것입니다.</p></keys.length>

위 내용은 Vue에서 로컬 스터리지를 반응하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!