[Vue] innerWidth 감지해서 resize 이벤트 생성

 

우선 resize 이벤트를 실행하려면 nextTick을 알아야한다

 

VueJs - $nextTick() 이란?

 

$NextTick으로 갱신형 이벤트를 사용할때 사용합니다.

자바스크립트는 비동기로 처리되는 특성을 가지기 때문에 vue 내부에서 data가 업데이트 되고 난 직후 Vue 가 DOM을 찾지 못하는 경우가 종종 발생하며 이와같은 문제를 해결해주는 vue에서 제공해주는 콜백함수입니다

 

data() {
      return {
      	windowWidth:0
    }
}

 

우선 window width 데이터를 담을 변수를 선언해줍니다.

 

 

👀 mounted

this.$nextTick(() => {
    window.addEventListener("resize", this.onResize);
});

 

👀 methods

 methods: {
      /**
       * width 값 감지
       */
      onResize() {
        this.windowWidth = window.innerWidth;
      },
 }

 

👀 watch 로 resize시 이벤트를 출력해준다

watch :{
	windowWidth(val){
    	//여기서 함수 선언!
    	console.log(val) //너비값이 움직일 경우마다 출력
    }
}