Ref

watch Vue.jsVue.js - The Progressive JavaScript Frameworkvuejs.org하나 이상의 반응형 데이터 소스를 감시하고, 소스가 변경되면 콜백 함수를 호출한다.watch()는 기본적으로 게으르기(lazy) 때문에, 감시된 소스가 변경되었을 때만 콜백이 호출된다. 첫 번째 인자 → 감시될 소스값을 반환하는 getter 함수ref반응형 객체또는 위에 나열한 것들의 배열※ 반응형 객체의 속성(number, string 등)은 감시할 수 없다. 두 번째 인자 → 콜백콜백의 인자변경된 값이전 값사이드 이펙트 클린업 콜백을 등록하기 위한 함수 세 번째 인자(optional) → 옵션 객체immediate: 감시자가 생성되는 즉시 콜백 호출deep: 소스가 객체인 경우, 깊은..

ref()composition API에서 반응형 상태를 선언 시 권장하는 방법import { ref } from 'vue'const count = ref(0) 템플릿에서 ref를 사용할 때는 .value 를 추가할 필요가 없다. 편의상 ref는 템플릿 내에서 사용될 때 자동으로 언래핑된다.이벤트 핸들러에 직접 참조를 변경할 때도 .value 가 불필요하다.pluscount : {{ count }} 다만 이벤트 핸들러에 따로 정의한 함수를 바인딩하여 ref를 변경할 경우, 스크립트에서 .value 는 필요하다.pluscount : {{ count }}const plusCount = () => { count.value++} 🔎 react의 useState와 비슷한 기능? 상태 관리를 위한 도구라는 점에서..

vue의 반응성 시스템을 공부하며 찾아 본 내용이라 vue에 조금 치중되어 있습니다…   공통점1. 선언적 방식으로 UI를 업데이트 한다.개발자는 데이터가 바뀌었을 때 어떤 식으로 UI가 바뀌는지를 명시하는 대신, 데이터와 UI 간의 관계를 설정하면 내부에서 알아서 UI를 갱신해준다. 2. Virtual DOM 사용데이터가 변화하면 실제 DOM을 바로 업데이트하는 대신 가상 DOM을 먼저 계산하여, 변경된 부분만 실제 DOM에 적용하는 방식으로 성능을 최적화한다. → reconciliationhttps://ko.vuejs.org/guide/extras/rendering-mechanism#virtual-dom 3. 컴포넌트 기반각 컴포넌트는 자체적인 상태를 가지고 있으며, 그 상태가 변할 때 UI를 갱신한..

Vue 2의 한계Vue 2에서 사용된 Object.defineProperty 는 객체의 각 속성에 접근할 때마다 getter와 setter를 설정하여 반응성을 제공하는 방식이다.해당 방식은 몇 가지 한계를 가지고 있다.새 속성 추가 : 이미 존재하는 속성에 대해서만 반응성을 적용할 수 있기 때문에, 객체에 새 속성을 추가하거나 배열의 특정 항목을 변경하는 경우 반응성을 처리하지 못했다.배열 처리 : 배열의 특정 인덱스 변경이나 크기 조작도 반응성 시스템에서 추적되지 않는다.성능 문제 : 큰 객체의 모든 속성에 일일이 getter와 setter를 정의하는 방식이므로, 특히 중첩된 객체 구조에서는 성능과 메모리 사용량 면에서 부담이 있었다.  Vue 3에서의 Proxy 기반 반응성 구현Vue 3의 반응성 시..