Life and IT

const app = Vue.createApp({ data() { return { count: 4 } }, methods: { increment() { // `this`는 컴포넌트 인스턴스를 참조합니다. this.count++ } } }) Up vote 위 코드에서 methods 내부 메서드의 this를 보았듯이, 항상 컴포넌트 인스턴스를 참조할 수 있도록 this 값을 자동으로 바인딩한다. 하지만 내부 메서드를 화살표 함수로 정의하는 경우 this가 존재하지 않기 때문에 화살표 함수를 자제해야 한다. Debounce & Throttling Vue에서 Debounce & Throttling을 ****자체적으로 지원하지 않지만, lodash와 같은 라이브러리를 사용하여 구현할 수 있다. 컴포넌트가 한 번만..

새로운 컴포넌트 인스턴스 생성 시 자체 state를 가지는 경우, data 함수를 호출한다. data 메서드는 하나의 객체만을 반환한다. 반환된 객체는 $data로 저장된다. 만약 아래와 같이 data 메서드를 정의하고 $data를 확인해본다면, data() { return { num: this.number, }; } console.log(this.$data); console.log(this.num); 아래와 같은 결과를 얻게 된다. 결과를 보면 this.$data가 Proxy인 것을 확인할 수 있다. Vue는 주어진 객체의 모든 프로퍼티를 proxy로 변환한다. 이 proxy는 es6 이상에서만 지원하는 기능이다. 따라서 IE에서도 Vue3를 사용할 수 있게 하기 위해 Object.definePrope..

Vue는 React와 마찬가지로 하나의 div 안에서 동작한다. 그리고 해당 div에 연결하는 방식은 조금 다르지만 비슷한 원리를 가지고 있다. 1) index.js(React) → main.js(Vue) 2) 부가 기능 없이 연결했을 때 // React ReactDOM.render( , document.getElementById("root"), ); // Vue createApp(App).mount("#root"); 3) store 또는 router 연결했을 때 // React ReactDOM.render( , document.getElementById("root"), ); // Vue createApp(App).use(store).use(router).mount("#root"); React는 rend..