[Vue.js] 옵션 구성

● 기본 옵션 구성

 

var app = new Vue({
    el: '#app', //마운트할 요소

    data: { // 애플리케이션에서 사용할 데이터 //객체 또는 배열로 지정하는 것이 일반적
       message: 'Vue.js'
    },

    computed: {
        computedMessage: function(){ //산출 속성 //함수로 인해 산출되는 데이터
            return this.message + '!'
        }
    },

    created: function(){ //라이프 사이클 훅 
        //일정한 라이프사이클을 미리 등록해서 적절한 시기에 자동으로 호출함
        //그 시점을 낚아채서 원하는 처리를 할 수 있게 하는 것을 Hook이라고 함

        //하고싶은처리
    },

    methods: {
        myMethod: function(){ //애플리케이션에서 사용할 메서드
            //하고싶은처리
        }
    }
})

 

 

 

* data와 methods 는 자유롭게 정의할 수 있지만, 라이프 사이클 훅은 사용할 수 있는 메서드가 정해져 있음

● created - 라이프 사이클 훅

 - 사용할 수 있는 라이프 사이클 

메서드	시점
beforeCreate	인스턴스가 생성되고, 리액티브 초기화가 일어나기 전
created	인스턴스가 생성되고, 리액티브 초기화가 일어난 후
beforeMount	인스턴스가 마운트되기 전
mounted	인스턴스가 마운트된 후
beforeUpdate	데이터가 변경되어 DOM에 적용되기 전
updated	데이터가 변경되어 DOM에 적용된 후
beforeDestory	Vue 인스턴스가 제거되기 전
destroyed	Vue 인스턴스가 제거된 후
errorCaptured	임의의 자식 컴포넌트에서 오류가 발생했을 때

 

 

-ex 

 created : Vue 인스턴스가 생성되고, 데이터 감시 등의 리액티브 시스템과 관련된 초기화가 끝났을 때, created 메서드가 자동으로 호출됨