13. accessing the instance data

Vue version 2.7.15

Vue version 3.3.7

// vm은 Vue Model의 약자이다.
const vm = Vue.createApp({
    data() {
        return {
            firstname: 'hyungju',
        }
    }
}).mount('#app');

setTimeout(() => {
    // vm.$data.firstname 이렇게 접근하지 않고도 아래와 같이 접근해도 된다.
    // 이는 Proxy Gain 이라고 불리는 프로세스이다.
    vm.firstname = 'Bob';
}, 2000)
// without a proxy
vm.$data.firstname
// with a proxy
vm.firstname
console.log(vm);
// Proxy {...}
//  ...
/**
 * vue는 우리가 생성하는 모든 data 속성에 대해 일련의 getter 및 setter를 생성한다.
 * 이는 data 속성을 검색하거나 업데이트하는 프록시 기능이다.
 * 프록시를 data의 중개인이라고 생각해도 좋다.
 * 
 * 프록시는 기본적으로 바로 작동한다.
 *  참고 - javascript proxy
 * */
//  get firstname: () => rawData[key]
//  set firstname: () => { }