현재 페이지를 새로 고치지 않는 vue에 대한 솔루션은 다음과 같습니다. 1. "this.show = false;setTimeout(() => {this.show = true},0)"과 같은 코드, 데이터에 임계값을 정의합니다. 2. 데이터가 처리된 후 "this.$froceUpdate()"를 사용하여 강제 새로 고침합니다. 3. 데이터 처리가 완료된 후 데이터 재설정 작업을 수행합니다. 4. "this.$set" 전역 메서드를 사용하여 데이터를 업데이트합니다. , 등.
이 튜토리얼의 운영 환경: Windows 10 시스템, Vue 버전 3, Dell G3 컴퓨터.
vue가 현재 페이지를 새로 고치지 않으면 어떻게 해야 하나요?
vue 프로젝트의 데이터 업데이트 페이지가 새로 고쳐지지 않습니다. 이러한 상황은 여러 유형으로 나눌 수 있습니다. 그러나 vue3.0 이하 버전에서는 데이터가 변경될 때 개체의 변경 사항을 모니터링할 수 없기 때문입니다. Vue의 새로 고침 메커니즘은 데이터 변경 시 이를 감지할 수 없기 때문에 실제 적용 시 다양한 프로세스를 통해 페이지 새로 고침 목적을 달성해야 합니다.
1. 이는 데이터 업데이트가 완료된 후 페이지를 재배치하고 다시 그리는 간단하고 투박한 솔루션입니다. 그러나 꼭 필요한 경우가 아니면 페이지 소비가 급격히 증가하므로 사용하면 안 됩니다. , 구체적인 구현 방법은 다음과 같습니다.
show와 같은 데이터의 임계값을 정의합니다.
코드 구현:
this.show = false;
setTimeout(() => {
this.show = true
},0)
로그인 후 복사
2. 데이터가 처리된 후 this.$froceUpdate( ) 강제 새로 고침
3. 데이터 처리가 완료된 후 데이터 재설정 작업을 수행하지만 이 방법은 개체에만 유효하다는 점에 유의할 가치가 있습니다. (개인 테스트 배열은 유효하지 않습니다. 친구가 얻을 수 있으면 남겨주세요. 메시지, 알려주세요 숭배하세요 ㅎㅎ) 그리고 이 방법은 참조 유형인 객체에 키 값이 있는 데이터 소스에는 적합하지 않습니다. (이 방법의 경우 개인적으로 참조 유형 데이터를 표시하는 템플릿이 다음과 같을 수 있다고 생각합니다. 별도의 컴포넌트에 캡슐화한 후 이 컴포넌트에서 데이터를 새로 고치려면 물론 데이터 변경 사항을 모니터링하는 것이 필수적입니다. 이 방법은 테스트되지 않았으므로 괜찮을 것입니다)
let temp = this.data;
this.data = null;
this.data = temp
로그인 후 복사
4. .$set 데이터 업데이트를 위한 전역 메소드; 여기서는 vue의 데이터 바인딩 메커니즘에 대해 이야기하고 싶습니다. 페이지가 생성될 때 html 템플릿은 처음 생성될 때 데이터에 이미 존재하는 데이터에만 바인딩됩니다. 페이지가 생성된 후 데이터를 추가하면 데이터가 업데이트되지만 페이지가 새로 고쳐지지 않는 경우가 있습니다. This.$set (데이터 소스, 추가할 데이터의 키/소스 데이터의 인덱스, 새 data)는 Vue에서 데이터를 추가하기 위해 공식적으로 제공하는 방법이며 페이지를 새로 고칠 수 있습니다!
5. 배열 데이터의 경우 데이터 수정 후 페이지가 새로 고쳐지지 않는 일반적인 이유는 다음과 같습니다.
배열 첨자를 통해 배열 요소 수정
-
배열 길이 수정
-
그런 다음 수정할 때 Vue는 배열 데이터를 직접 감지할 수 있으므로 push(), pop(), Shift(), unshift(), splice(), sort(), reverse() 및 기타 기본 메서드를 사용하여 데이터를 조작해야 합니다. 이러한 방법으로 가져온 데이터.
6. 데이터가 새로 고쳐지지 않는 가장 근본적인 이유는 Vue가 템플릿 구조가 업데이트되지 않았다고 생각하여 새로운 가상 DOM을 생성하지 않기 때문에 필요한 DOM에 키 값을 추가할 수 있기 때문입니다. 작업이 종료되면 변경되는 내용이 업데이트되므로 새로 고쳐집니다. (최근에 배운 새로운 기술이므로 더 추가하겠습니다.)
추천 학습: "
vue 비디오 튜토리얼
"
위 내용은 vue가 현재 페이지를 새로 고치지 않으면 어떻게 해야 하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!