심층적 인 응답 원칙
우리는 이미 대부분의 기본 콘텐츠에 대해 이야기했으며 이제 기본 콘텐츠에 대해 이야기 할 것입니다. vue.js의 가장 중요한 기능 중 하나는 응답 시스템입니다. 모델은 일반적인 객체 일 뿐이며 뷰를 업데이트 할 수 있습니다. 이를 통해 국가 관리는 매우 간단하고 직관적이지만 원칙을 이해하는 것도 중요하며 몇 가지 일반적인 문제를 피할 수 있습니다. 다음으로 vue.js 응답 시스템의 기본 세부 사항에 대해 깊이 파고 들기 시작합니다.
변경 사항을 추적하는 방법
Vue.js는 데이터 옵션으로 VUE 인스턴스에 일반 객체를 전달하여 특성을 가로 지르고 객체를 사용하여 getter/setter로 변환합니다. 이것은 ES5 기능이며 패치로 구현할 수 없습니다. 이것이 Vue.js가 IE8 이하를 지원하지 않는 이유입니다.
사용자는 getters/setter를 볼 수 없지만 내부적으로 Vue.js는 속성에 액세스하고 수정할 때 변경 사항을 알리도록합니다. 한 가지 문제는 브라우저 콘솔에서 데이터 객체를 인쇄 할 때 Getter/Setter 형식이 다르며 Vm. $ log () 인스턴스 메소드를 사용하면보다 친숙한 출력이 발생할 수 있다는 것입니다.
템플릿의 각 명령/데이터 바인딩에는 해당 감시자 객체가 있으며, 이는 계산 프로세스 중 속성을 종속성으로 기록합니다. 그 후, 종속 세터가 호출되면 감시자 재 계산이 트리거되며, 이로 인해 관련 지침이 DOM을 업데이트 할 수 있습니다.
감지 문제를 변경하십시오
ES5 제한으로 인해 vue.js는 객체 속성의 추가 또는 제거를 감지 할 수 없습니다. vue.js는 인스턴스를 초기화 할 때 속성을 getter/setter로 변환하기 때문에 vue.js가 반응을 보이도록 변환 할 수 있도록 데이터 객체에 있어야합니다. 예를 들어:
var data = {a : 1} var vm = new vue ({data : data}) //`vm.a` 및`data.a`는 이제 vm.b = 2 //`vm.b`는 응답 형 데이터가 아닙니다 .B = 2 //`data.b '는 응답하지 않습니다.그러나 인스턴스 생성 후 속성을 추가하고 반응을 이루는 방법이 있습니다.
vue 인스턴스의 경우 $ set (key, value) 인스턴스 메소드를 사용할 수 있습니다.
vm. $ set ( 'b', 2) //`vm.b` 및`data.b '는 이제 반응합니다
일반 데이터 객체의 경우 글로벌 메소드 vue.set (객체, 키, 값) :
vue.set (data, 'c', 3) //`vm.c` 및`data.c`는 이제 반응합니다
때로는 객체를 사용하여 속성을 추가하기 위해 Object.Assign () 또는 _.extend ()와 같은 기존 객체에 속성을 추가하려고합니다. 그러나 객체에 추가 된 새로운 속성은 업데이트를 트리거하지 않습니다. 현재 원래 객체의 속성 및 새로운 속성을 포함하여 새 객체를 만들 수 있습니다.
//`object.Assign (this.someObject, {a : 1, b : 2})`this.someObject = Object.Assign ({}, this.someObject, {a : 1, b : 2})를 사용하지 마십시오.이전에 목록 렌더링에서 논의 된 배열 관련 문제도 있습니다.
데이터 초기화
vue.js는 응답 속성을 동적으로 추가하기위한 API를 제공하지만 데이터 객체에서 모든 응답 속성을 선언하는 것이 좋습니다.
이것을하지 마십시오 :
var vm = new vue ({template : '<div> {{msg}} </div>'}) // 그런 다음`msg`vm. $ set ( 'msg', 'hello!')를 추가하십시오.이것을 수행하십시오 :
var vm = new vue ({data : {//`msg` msg : ''}, 템플릿 : '<div> {{msg}} </div>'}) // 그런 다음`msg`vm.msg = 'Hello!'이 작업을 수행하는 데는 두 가지 이유가 있습니다.
1. 데이터 객체는 구성 요소 상태의 스키마와 같습니다. 모든 속성을 선언하면 구성 요소 코드를 쉽게 이해할 수 있습니다.
2. 최상위 응답 속성을 추가하면 모든 감시자가 이전에 존재하지 않았고 감시자 추적이 없기 때문에 모든 감시자가 다시 계산할 수 있습니다. 이 성능은 일반적으로 허용 가능하지만 (특히 Angular의 더러운 검사와 비교할 때) 초기화시 피할 수 있습니다.
비동기 업데이트 큐
vue.js 기본값은 DOM을 비동기로 업데이트합니다. 데이터 변경이 관찰 될 때마다 VUE는 동일한 이벤트 루프의 모든 데이터 변경을 캐시하기 위해 큐를 시작합니다. 감시자가 여러 번 발사되면 한 번만 대기열에만 밀립니다. 다음 이벤트 루프까지 기다리면 VUE는 대기열을 지우고 필요한 DOM 업데이트 만 수행합니다. 돌연변이 관상 서버는 내부 비동기 큐에서 선호되며, Settimeout (FN, 0)은 지원되지 않으면 사용됩니다.
예를 들어, vm.somedata = 'new value'세트를 사용하면 DOM이 즉시 업데이트되지 않지만 다음에 이벤트 루프가 큐를 지울 때 업데이트됩니다. 우리는 기본적 으로이 프로세스에 신경 쓰지 않아도되지만 DOM 상태가 업데이트 된 후 무언가를하고 싶다면 도움이됩니다. vue.js는 개발자가 데이터 중심 접근 방식을 따르고 DOM을 직접 수정하지 않도록 권장하지만 때로는 그렇게합니다. 데이터가 변경된 후 vue.js가 DOM의 업데이트를 완료 할 때까지 기다리려면 데이터 변경 직후 vue.nexttick (콜백)을 사용할 수 있습니다. DOM 업데이트가 완료된 후 콜백이 호출됩니다. 예를 들어:
<div id = "example"> {{msg}} </div>
var vm = new vue ({el : '#example', data : {msg : '123'}}) vm.msg = '새 메시지'// 데이터 수정 vm. $ el.textContent === '새 메시지'// falsevue.nexttick (function () {vm. $ el.textContent === 'new 메시지').이 인스턴스 방법은 Global VUE가 필요하지 않기 때문에 더 편리 하며이 콜백은 현재 VUE 인스턴스에 자동으로 바인딩됩니다.
vue.component ( 'example', {template : '<span> {{msg}} </span>', data : function () {return {msg : 'not updated'}}}, methods : {updateMessage : function () {this.msg = 'updated'console.log (this. {console.log (this. $ el.textContent) // => '업데이트'})}}))컴퓨팅 속성의 비밀
vue.js의 계산 된 속성은 간단한 getters가 아닙니다. 계산 속성은 응답 종속성을 지속적으로 추적합니다. 계산 된 속성을 계산할 때 vue.js는 종속성 목록을 업데이트하고 결과를 캐시합니다. 캐시 된 결과는 종속성 중 하나가 변경 될 때만 유효하지 않습니다. 따라서 종속성이 변경되지 않는 한, 계산 된 속성에 액세스하면 getter를 호출하는 대신 캐시 된 결과를 직접 반환합니다.
왜 캐시인가? 우리가 소비하는 계산 속성 A를 가지고 있다고 가정 해 봅시다.이 계산 속성 A는 거대한 배열을 통해 반복하고 많은 계산을 할 것이라고 가정합니다. 그런 다음 A에 의존하는 다른 계산 속성이있을 수 있습니다. 캐시가 없으면 A의 getter를 여러 번 필요 이상으로 호출합니다.
계산 된 속성이 캐시되기 때문에 액세스 할 때 Getter가 항상 호출되는 것은 아닙니다. 다음 예를 고려하십시오.
var vm = new vue ({data : {msg : 'hi'}, 계산 : {example : function () {return date.now () + this.msg}}})계산 된 속성 예제는 하나의 종속성 만 있습니다 : vm.msg. DATE.NOW ()는 VUE의 데이터 관찰 시스템과 관련이 없기 때문에 응답 종속성이 아닙니다. 따라서 vm.example에 액세스 할 때 VM.MSG가 변경되지 않는 한 타임 스탬프는 변경되지 않은 것으로 밝혀졌습니다.
때때로 나는 getter가 vm.example에 액세스 할 때마다 원래 행동을 바꾸고 Getter를 호출하지 않기를 바랍니다. 현재 지정된 계산 된 속성에 대해 캐시를 꺼질 수 있습니다.
계산 : {예 : {캐시 : false, get : function () {return date.now () + this.msg}}}이제 vm.example에 액세스 할 때마다 타임 스탬프가 새롭습니다. 그러나 JavaScript로 액세스하는 것은 다음과 같습니다. 데이터 바인딩은 여전히 종속성에 의해 주도됩니다. 계산 된 속성 {{example}}이 모듈에 바인딩되면 DOM은 응답 종속성이 변경되는 경우에만 업데이트됩니다.
이 기사는 "vue.js 프론트 엔드 구성 요소 학습 자습서"로 편집되었으며 모두가 배우고 읽을 수 있습니다.
vue.js 구성 요소에 대한 튜토리얼은 특수 주제 vue.js 구성 요소 학습 자습서를 클릭하여 학습하십시오.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.