[vue] reactivity-fundamentals
참고
반응성 기초
reactive state 선언
Option API에서는 data 함수 옵션으로 컴포넌트 reactive state를 선언한다. 옵션들은 모두 객체를 돌려받는 함수형태여야 한다.
vue가 컴포넌트 인스턴스를 생성하고 그 결과값을 객체로 넘겨주기 떄문이다.
this를 이용해서 data() 내에서 선언된 프로퍼티를 사용할수 있다.
data() 밖에서도 프로퍼티를 추가할 수 있지만 reactive system은 최초 인스턴스가 생성되었을때만 구성이 되므로 추가한 프로퍼티에는 reactive state를 사용할 수 없다.
export default {
data() {
return {
someObject: {}
}
},
mounted() {
const newObject = {} // data()밖에서 선언된 프로퍼티는 reactive system에 들어가지 못한다.
this.someObject = newObject
console.log(newObject === this.someObject) // false
}
}
$, _ 는 vue에서 사용하는 예약 접두사로 사용하지 말것
메소드 선언
methods 객체 옵션으로 메소드를 추가할 수 있다. this값은 자동으로 methods 연결되어 컴포넌트 인스턴스를 참조하게 된다.
이벤트리스너나 콜백에서도 this값이 올바르게 유지된다. methods옵션 내 화살표함수는 this를 사용할 수 없으므로 유의
export default {
data() {
return {
count: 0
}
},
methods: {
increment() {
this.count++
}
},
mounted() {
// methods can be called in lifecycle hooks, or other methods!
this.increment()
}
}