>  기사  >  웹 프론트엔드  >  vue $refs 오류 보고 문제를 해결하는 방법

vue $refs 오류 보고 문제를 해결하는 방법

藏色散人
藏色散人원래의
2021-01-11 09:54:334544검색

Vue $refs 오류 보고 해결 방법: 1. 해당 코드 파일을 연 다음 "this.$nextTick();"을 추가합니다. 2. Mounted() 후크 함수에서 호출하면 됩니다.

vue $refs 오류 보고 문제를 해결하는 방법

이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.5.17, DELL G3 컴퓨터.

【관련 추천 글: vue.js

프로젝트 개발 중에 undefound의 'style' 속성을 읽을 수 없는 문제에 직면했습니다. 어떻게 해결했는지는 자세히 설명하지 않고 코드만 게시합니다.

created() {
  this.getAddBG();
},
methods: {
  getAddBG() {
    let config = {
      service: "200017",
      h5Type: "activity"
    };
    this.$http.featchH5Post(config).then(res => {
      let list = res.data.data.advertiseList;
      list.forEach(item => {
        this.$refs[
          item.name
        ].style.backgroundImage = `url(${item.defaultPicture})`;
      });
    });
  }
}

해결책:

첫 번째 방법: this.$nextTick();

created() {
  this.$nextTick(() => {
    this.getAddBG();
  });
}

두 번째 방법: Mounted() 후크 함수를 호출합니다.

mounted() {
  this.getAddBG();
}

이유 조사 및 분석:

1. Vue 라이프 사이클과 Vue.nextTick()부터 시작하겠습니다.

created() 후크 함수가 실행될 때 DOM이 렌더링되지 않으며, 이때는 DOM 작업을 수행할 수 없습니다.

Vue 라이프사이클의 Created() 후크 함수에서 수행되는 DOM 작업은 Vue.nextTick()의 콜백 함수에 배치되어야 합니다.

mounted() Hook 함수가 실행되면 모든 DOM 마운팅과 렌더링이 완료됩니다. 이때 Hook 함수에서 DOM 작업을 수행하는 데에는 문제가 없습니다.

2. Vue 공식 문서에 대한 설명입니다.

Vue는 DOM 업데이트를 비동기식으로 수행합니다. 데이터 변경 사항이 관찰되는 한 Vue는 대기열을 열고 동일한 이벤트 루프에서 발생하는 모든 데이터 변경 사항을 버퍼링합니다. 동일한 감시자가 여러 번 트리거되면 대기열에 한 번만 푸시됩니다. 버퍼링 중 데이터 중복 제거는 불필요한 계산과 DOM 작업을 방지하는 데 매우 중요합니다. 그런 다음 다음 이벤트 루프 틱에서 Vue는 대기열을 플러시하고 실제(중복 제거된) 작업을 수행합니다. Vue는 내부적으로 비동기 대기열에 기본 Promise.then 및 MessageChannel을 사용하려고 시도합니다. 실행 환경이 이를 지원하지 않으면 대신 setTimeout(fn, 0)이 사용됩니다.

Vue.nextTick()은 코드 실행을 지연하는 데 사용됩니다.

위 내용은 vue $refs 오류 보고 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.