<script>
const vue = Vue.createApp({//Vue Instance 생성
name : "App",
data() {//data로 정해진 func
return { //바인드 될 변수 정의
name: ""
}
}
}).mount("#vcommon"); //vue 탑재(proxy 관리)
</script>
name, data() 옵션 객체라고 부른다. Vue를 생성할 때 전달하는 대상들을 담은 객체
vue 객체 Instance를 Root Instance라고 부른다
생성된 vue 객체 Instance를 DOM tree로 마운트 한다.(.mount())
data() 옵션
template에 바인딩할 데이터를 넣는 부분
data 옵션이 변경되면 template에 반영(반응성 : proxy0)
반드시 model 객체를 리턴하야한다.
model 객체 리턴하는 부분
Computed 옵션
특정한 처리를 계산하는 함수를 미리 정의
model에 정의된 속성의 값이 변경될 때 마다 미리 정의된 함수가 자동 호출 (this로 data()에 정의된 변수 접근 가능)
함수에 처리된 결과가가 바로 template 에 바인딩
계산된 값은 Ram에 넣어 캐싱한다. (비동기에는 부적합 하지만, 호출 시간이 줄어든다.=> 자주 사용하는 함수에 적용하지 용이)