Vue.js
라이프 사이클 후크
수색…
Vue 1.x를위한 후크
init
created
$el
설정 이전에 발생하지만data observation
후computed properties
,watch/event callbacks
및methods
가 설정되었습니다.
beforeCompile
compiled
directives
은$el
이 사용 가능하기 전에 연결되어 있지만 여전히 연결되어 있습니다.
ready
$el
완료되고 인스턴스는 처음으로 DOM에 주입된다.
attached
$el
이directive
의해 DOM에 첨부되거나 인스턴스가$appendTo()
호출 할 때 발생합니다.
detached
$el
이 DOM이나 인스턴스 메소드에서 제거되거나 분리 될 때 호출됩니다.
beforeDestroy
destroyed
bindings
및directives
은 이미 바인딩 해제되었으며 자식 인스턴스도 파괴되었습니다.
인스턴스에서 사용하기
모든 라이프 사이클 후크 때문에 Vue.js
단지입니다 functions
직접 인스턴스 declaraction 그들 중 하나를 배치 할 수 있습니다.
//JS
new Vue({
el: '#example',
data: {
...
},
methods: {
...
},
//LIFECYCLE HOOK HANDLING
created: function() {
...
},
ready: function() {
...
}
});
일반적인 함정 :`ready ()`훅에서 DOM 접근하기
ready()
후크에 대한 일반적인 사용법은 DOM에 액세스하는 것입니다 (예 : 자바 스크립트 플러그인을 시작하고 요소의 크기를 가져 오는 등).
문제
Vue의 비동기 DOM 업데이트 메커니즘으로 인해 ready()
후크가 호출 될 때 DOM이 완전히 업데이트되었다고 보장 할 수 없습니다. 이 요소는 정의되지 않았기 때문에 일반적으로 오류가 발생합니다.
해결책
이 상황에서 $nextTick()
인스턴스 메소드가 도움이 될 수 있습니다. 이 메서드는 다음 틱 이후까지 제공된 콜백 함수의 실행을 연기합니다. 즉, 모든 DOM 업데이트가 완료 될 때 호출됩니다.
예:
module.exports { ready: function () { $('.cool-input').initiateCoolPlugin() //fails, because element is not in DOM yet. this.$nextTick(function() { $('.cool-input').initiateCoolPlugin() // this will work because it will be executed after the DOM update. }) } }
Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow