VUE 청취 창에서 변경 이벤트 문제를 해결하는 방법

이제 VUE 모니터링 창 변경 이벤트에 관해 간략한 논의를 진행하겠습니다. 좋은 참고가치가 있어 모든 분들께 도움이 되기를 바랍니다.

Vuejs 자체는 MVVM 프레임워크입니다. 하지만, 윈도우에서 이벤트를 모니터링 해보면 부족한 것 같던 경우가 많습니다.

예를 들어 이번에는 window.resize를 하기 전에 바이두에서도 검색해 봤습니다. 모두가 이 문제에 대해 걱정하고 있는 것 같아요.

질문: 저도 오늘 캔버스 적응과 관련하여 이러한 문제에 직면했습니다. 창의 변화에 ​​따라 캔버스의 너비를 변경합니다. 참고: 프레임워크의 버그를 해결하기 위해 중요한 문제가 세 번 언급됩니다. 먼저 프레임워크 버전에 대해 이야기하겠습니다(여기서는 Vue 2.x, ES6 사용)

해결 방법:

1단계: 먼저 레코드 너비를 데이터의 속성으로 정의합니다

data: { 
 screenWidth: document.body.clientWidth // 这里是给到了一个默认值 （这个很重要）
  }

2단계: vue가 마운트될 때 reisze 이벤트를 마운트하는 방법에 대해 이야기해야 합니다

mounted () { 
    const that = this window.onresize = function() { 
    return function(){ 
      window.screenWidth = document.body.clientWidth;
      that.screenWidth = window.screenWidth
      })()
     } 
    }

3단계: 이 속성 값의 변경을 모니터링하세요. 변경 사항이 있으면 val이 this.screenWidth

watch: { 
   screenWidth (val) { 
      this.screenWidth = val
      } 
    }

로 전달됩니다. 4단계: 최적화: 크기 조정 기능을 자주 실행하면 페이지가 중단됩니다

watch: { 
   screenWidth (val) { 
     if (!this.timer) { 
       this.screenWidth = val 
       this.timer = true 
        let that = this 
   setTimeout(function () { 
        // that.screenWidth = that.$store.state.canvasWidth 
  console.log(that.screenWidth) 
        that.init() 
        that.timer = false 
       }, 400) 
      } 
     } 
   }

위 내용은 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되길 바랍니다.

관련 기사:

Vue는 탭 전환과 스타일 전환 방법을 구현합니다.

javaScript

node.js 블로그 프로젝트 개발 노트에서 "=="와 "==="의 차이점에 대한 자세한 설명

위 내용은 VUE 청취 창에서 변경 이벤트 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!