Vue에서 생성된 것과 마운트된 것의 차이점

이전 기사에서 모든 different lifecycle hooks in Vue을 다루었습니다. 수명 주기 후크에 대해 이야기할 때 대부분의 사람들이 혼동하는 것 중 하나는 created 와 mounted 의 차이점입니다. 둘 다 비슷한 이름을 가지고 있고, 같은 일을 해야 할 것 같지만 미묘한 차이가 있습니다.

Vue에서 생성된 것과 마운트된 것의 차이점

우선 created() 및 mounted() 모두 프로토타입의 데이터 및 소품에 액세스할 수 있습니다. 예를 들어, 두 후크 모두 아래의 'My Message' 콘솔 로그와 myProp 의 기본값인 'Some Prop'을 콘솔 로그에 기록합니다.

export default {
    data() {
        return {
            msg: 'My Message'
        }
    },
    props: {
        myProp: {
            type: String,
            default: 'My Prop'
        }
    },
    created() {
        console.log(this.msg);
        console.log(this.myProp);
    },
    mounted() {
        console.log(this.msg);        
        console.log(this.myProp);
    }
}

생성 및 마운트에 대한 소품 상속]

참고: 속성을 설정하더라도 created() 및 mounted()에서 계속 사용할 수 있습니다.
created()와 mounted()의 근본적인 차이점은 아직 created()의 DOM에 액세스할 수 없다는 것입니다. 이 예제에서 this.$el 를 참조하려고 하면 null 에서 created() 를 반환하고 mounted() 에서 DOM 요소를 반환합니다.

export default {
    created() {
        // Returns null
        console.log(this.$el);
    },
    mounted() {
        // Returns the DOM element in console:
        console.log(this.$el);     
    }
}

따라서 DOM 조작 또는 querySelector와 같은 메서드를 사용하여 DOM 구조를 가져오는 것조차 created()에서 사용할 수 없습니다. lifecycle hooks 문서에서 언급했듯이 created()는 API를 호출하는 데 적합하고 mounted()는 DOM 요소가 완전히 로드된 후 무엇이든 수행하는 데 적합합니다.

Composition API 및 생성 또는 마운트

이에 대한 한 가지 주의 사항은 Composition API를 사용하는 경우 created() 실제로 beforeCreated()가 더 이상 존재하지 않는다는 것입니다. 대신 setup() 를 사용해야 합니다. 이 함수는 created() 및 beforeCreated() 모두를 대신합니다. 따라서 DOM은 여전히 ​​setup()에서 사용할 수 없습니다. Composition API에서 mounted()는 변경되지 않은 상태로 유지됩니다.