Vue 인스턴스 주요 옵션

Vue 인스턴스란?

vue를 실행하기 위해 첫번째로 생성하는 객체

var vm = new Vue({
  // instance option properties
})

// or

new Vue({
  // instance option properties
})

 

Vue instance options

옵션	설명	예제	비고
el	값: any Vue가 실행될 HTML의 DOM 요소를 지정	el: '#app'	DOM 요소에 직접 액세스하려면 $el 대신 template refs를 사용하는 것을 권장함.
data	값: object Vue가 바라보는 data 객체를 지정	data: {}
props	값: object 컴포넌트가 받는 현재 props를 나타냄. 컴포넌트 인스턴스 프록시는 props 객체의 속성에 접근할 수 있음	props: []
computed	data 객체 등을 사용하여 계산된 값을 리턴함. 함수로 작성 * methods와의 차이점은 캐싱을 시켜놓고 동일한 요청이 또 올 경우는 computed는 함수를 실행하지 않고 캐싱된 값만 리턴해줌.	computed: { }	화살표 함수 사용 불가
methods	data 객체 등을 사용하여 계산된 값을 리턴해줌. * computed와의 차이점은 캐싱이 되지 않고 호출될때마다 함수를 계속 실행함.	methods: { }	화살표 함수 사용 불가
watch	지정된 변수를 계속 지켜보고 있다가 값이 변경되었을 때 정의된 함수를 실행시킴	watch: {   i : function(v) {     return v++;   } }	i는 관잘하고자 하는 지정된 변수, 긴 시간이 필요한 비동기 처리가 필요한 경우 주로 사용됨(axios, fetch 등)