[Vue.js]page 시작 시 created, mounted 차이에 따른 화면 문제

 

created() {
	this.onClickLine(this.lines[0])
},
methods: {
	onClickLine : function(line) {
    		chart...
	}
}

결과

함수가 실행은 되나 화면에 차트 그림이 출력안됩니다.

발생원인 : created는 data와 events가 활성화되어 접근할 수 있지만 템플릿과 가상돔은 마운트 및 렌더링되지 않은 상태이기 때문에 created가 실행되는 시점에 dom에 출력하지 않는 겁니다.

해결방법 :  

mounted() {
	this.onClickLine(this.lines[0])
},
methods: {
	onClickLine : function(line) {
    		chart...
	}
}

created 대신 mounted를 사용합니다.

mounted 실행 시점엔 컴포넌트, 템플릿, 렌더링된 돔에 접근 가능합니다.

 

created

인스턴스가 작성된 후 동기적으로 호출된다.

부모,자식 관계의 컴퍼넌트가 렌더링 될때 mounted보다 먼저 호출되며 부모,자식순으로 실행한다.

데이터 초기화 선언을 created에서 많이 한다.

가상돔을 건드릴 수 없음($el 속성을 아직 사용할 수 없음)

mounted

부모,자식 관계의 컴퍼넌트가 렌더링 될때 created다음으로 호출되며 자식,부모순으로 실행한다.

el이 새로 생성된 vm.$el로 대체된 인스턴스가 마운트 된 직후 호출됨.(가상돔 조작이 가능)

돔조작관련을 mounted영역에 기술한다.

출처 - negabaro.github.io/archive/vuejs-created_mounted

vue.js 라이프사이클 created mounted의 차이

 

Vue Lifecycle (캡틴 판교님 Github에서 발췌)

https://joshua1988.github.io/vue-camp/vue/life-cycle.html#%E1%84%85%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%91%E1%85%B3-%E1%84%89%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%8F%E1%85%B3%E1%86%AF-%E1%84%83%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%8B%E1%85%A5%E1%84%80%E1%85%B3%E1%84%85%E1%85%A2%E1%86%B7

Instance Lifecycle | Cracking Vue.js

 

ps. mounted해도 page 접근시 주기적으로 DOM에서 요소를 가지고오지 못하는 경우가 있었습니다.

이벤트 실행시 dynamic import를 통한 모듈 동적 로딩을 사용중인데

확인해보니 DOM 모두 load 되는 시점과 import하면서 실행되는 mounted 시점이 어긋나 canvas 요소에 접근 못하는 경우가 존재했습니다.

window.addEventListener('load', function() {
	//import module
})
      
or...
      
docReady(fn) {
	// see if DOM is already available
	if (document.readyState === "interactive") {
		// call on next available tick
		setTimeout(fn, 100);
	} else {
		document.addEventListener("DOMContentLoaded", fn);
	}
}

or..

var checkExist = setInterval(() => {
	if ($('#target-content').length) {
		//import module
		clearInterval(checkExist)
        }
}, 100);

방법은 3가지로 해결볼 수 있습니다.

DOM이 모두 load 되고 나서 import 하거나 (동기면 비동기로. async await, promise, load 등)

DOM state가 interactive 일때 약간의 시간을 delay한 후 function을 실행하는 것입니다.

혹은 이벤트 실행 후 계속 관찰하다 원하는 element가 준비되면 function을 실행하면 됩니다.

이보다 더 좋은 방법이 있다면 알려주세요!