vue.js : created 라이프사이클, 어떤 용도일때 사용할까?

 

created 라이프사이클 훅은 Vue 인스턴스가 생성된 직후에 호출되므로, 초기 데이터를 설정하거나 데이터를 불러오는 등의 작업을 수행하는 데 주로 사용됩니다. 아래는 created 훅의 일반적인 사용 사례입니다

 

 

초기 데이터 설정

 

created 훅에서는 Vue 인스턴스의 데이터에 접근하고 변경할 수 있습니다. 따라서 인스턴스의 초기 상태를 설정하는 데 created 훅을 사용할 수 있습니다.

 

new Vue({
    data: {
        message: null
    },
    created: function () {
        this.message = 'Hello, Vue.js!';
    }
});

 

 

 

데이터 불러오기

 

 

created 훅에서는 외부 API를 호출하여 데이터를 불러오는 등의 비동기 작업을 수행하는 데 사용할 수 있습니다. 이 때 created 훅에서 반환된 Promise를 사용하여 데이터를 불러온 후에 추가 작업을 수행할 수 있습니다.

 

new Vue({
    data: {
        posts: null
    },
    created: function () {
        fetch('https://api.example.com/posts')
            .then(response => response.json())
            .then(data => {
                this.posts = data;
            });
    }
});

 

 

이벤트 리스너 등록

 

created 훅에서는 커스텀 이벤트 리스너를 등록하는 데 사용할 수 있습니다. 이 때 이벤트 리스너는 beforeDestroy 또는 destroyed 훅에서 제거되어야 합니다.

 

new Vue({
    data: {
        windowWidth: window.innerWidth
    },
    created: function () {
        window.addEventListener('resize', this.onResize);
    },
    beforeDestroy: function () {
        window.removeEventListener('resize', this.onResize);
    },
    methods: {
        onResize: function () {
            this.windowWidth = window.innerWidth;
        }
    }
});

 

 

이와 같이 created 훅은 Vue 인스턴스가 생성된 직후에 필요한 초기 작업을 수행하는 데 사용됩니다. 그러나 created 훅에서는 DOM에 접근할 수 없으므로, DOM 요소를 조작해야 하는 작업은 mounted 라이프사이클 훅에서 수행해야 합니다.