Vue.js2 [Vue] Vue의 반응형 시스템 Vue에서 data가 변경될 때 어떻게 그때 그때 반응하고 업데이트해서 DOM을 rerender할까요? 1. getter와 setter는 속성에 접근(get)하거나 수정(set)할 때, Vue가 종속성 추적 또는 변경 알림을 수행할수 있습니다. 2. 모든 컴포넌트 인스턴스에 해당 watcher 인스턴스가 있으며, 이 인스턴스는 컴포넌트가 종속적으로 렌더링 되는 동안 수정된 모든 것을 기록합니다. 3. 나중에 종속적인 setter가 트리거가 되면 watcher에 전달하고 컴포넌트가 리렌더링 됩니다. Vue는 DOM 업데이트를 비동기적으로 처리하는데요, 1. 데이터 변경 발견 -> 큐에 이벤트루프에서 생기는 모든 데이터 변경을 버퍼에 담음 2. 같은 Watcher가 여러번 발생 시 대기열에서 한 번만 푸시됨.. 2021. 5. 7. [Vue] Computed의 다양한 사용법 1. 언제 computed를 사용하나? 어떤 data를 {{ }} 템플릿 안에 표현식으로 가공해서 표현해야할 때 연산이 너무 길어지거나 복잡해지면 유지보수하기가 힘들고 가독성도 떨어지게 됩니다. 그런 복잡한 식이 될 경우 computed 속성을 사용하면 간결하게 표현할 수 있는데요. 예시를 한번 보겠습니다. 만약 예를들어 데이터로 ㎡ 단위의 숫자를 받아서 평수로 계산해서 보여줘야한다면 평수 계산식을 computed 안에서 사용해서 보여주는 편이 좋습니다. data: function () { return { size: 3323 } }, computed: { squareSize: function () { if (!this.size) return 0 return `${Math.round(this.size / .. 2021. 4. 28. 이전 1 다음
