728x90
반응형

2024/10/05 3

[콜럼Vue스] 관찰 속성(Watcher, Watch Property)

**관찰 속성(Watcher, Watch Property)**은 Vue.js에서 특정 데이터를 **감시(watch)**하고, 그 데이터가 변경될 때마다 특정 로직을 실행할 수 있는 기능임. 워치 속성은 주로 비동기 작업, 데이터 변화를 기반으로 한 추가 처리 또는 복잡한 연산이 필요할 때 유용하게 사용됨.Vue의 반응형 시스템은 data나 computed의 값을 자동으로 갱신해주지만, 때로는 특정 데이터의 변화를 수동으로 감시하고, 그에 따라 추가 작업이 필요한 경우가 있음. 이럴 때 관찰 속성을 사용하여 필요한 동작을 처리할 수 있음.1. 관찰 속성의 기본 개념Vue에서 관찰 속성을 사용하면, data나 computed의 특정 변화를 감지하고, 그 변화에 대응하는 로직을 실행할 수 있음. 관찰 속성은 ..

[콜럼Vue스] 생명주기 메서드(Lifecycle Methods)

Vue.js 애플리케이션에서 Vue 인스턴스나 컴포넌트가 생성되고, DOM에 렌더링되며, 업데이트되거나 파괴될 때 특정 단계에서 실행되는 메서드임. Vue 컴포넌트는 생성에서부터 파괴에 이르기까지 여러 가지 상태를 거치며, 이 과정에서 특정 작업을 수행할 수 있는 훅(Hook)을 제공함.이러한 생명주기 메서드를 활용하면, Vue 컴포넌트의 각 단계에서 API 호출, 타이머 설정, 리소스 해제 등의 작업을 적절한 시점에 실행할 수 있음.1. Vue 인스턴스 생명주기Vue 컴포넌트는 아래와 같은 주요 단계로 나뉘며, 각 단계에서 생명주기 메서드가 호출됨:생성 단계: Vue 인스턴스가 초기화됨.DOM에 마운트 단계: 인스턴스가 DOM에 연결되어 화면에 렌더링됨.업데이트 단계: 데이터가 변경되어 화면이 다시 렌..

[콜럼Vue스] 메서드 (Method)

메서드(Method)는 Vue.js에서 인스턴스나 컴포넌트 내에서 정의된 함수를 의미하며, 주로 이벤트 처리나 특정 동작을 수행할 때 사용됨. Vue 인스턴스의 methods 옵션 안에 정의된 함수들은 템플릿에서 쉽게 호출할 수 있으며, Vue 인스턴스의 데이터에 접근하고, 이를 변경할 수 있음.요약:메서드는 Vue 인스턴스나 컴포넌트에서 특정 동작을 수행하는 함수로, 이벤트 처리나 데이터 조작을 담당함.템플릿에서는 이벤트 디렉티브(@click, @input 등)를 사용하여 메서드와 사용자 상호작용을 연결할 수 있음.메서드 내부에서 **this**를 사용하여 Vue 인스턴스의 데이터에 접근하고 수정할 수 있음.메서드와 계산된 속성의 차이는 캐싱 여부이며, 복잡한 연산에서는 계산된 속성이 더 유리함.1. ..

728x90
반응형