반응형 Framework/vue_Foundation13 vue3 ref와 reactive 사용법과 차이점 Options API는 data, methods, mounted 와 같은 옵션을 사용. (vue3 이전 버전)Composition API는 반응형 코드를 작성하는 단일 setup 함수가 있음. (vue3)composition api는 vue 컴포넌트를 작성할 수 있는 api세트이다. 그 중 ref와 reactive는 컴포넌트와 별개로 사용할 수 있는 반응형 데이터를 생성할 수 있다. ref는 premity type(string, number, object) 어떠한 타입도 사용할 수 있고,reactive는 object, array, map, set과 같은 타입에서만 사용할 수 있다. 객체를 선언할때 둘 다 사용할 수 있는데, ref를 사용하면 객체를 한꺼번에 객체 할당할 수 있다.반대로 reactive.. 2024. 8. 5. vue router 이동 // 리터럴 문자열 경로router.push('/users/eduardo')// 경로가 있는 개체router.push({ path: '/users/eduardo' })// 이름을 가지는 라우트router.push({ name: 'user', params: { username: 'eduardo' } })// 쿼리와 함께 사용, 결과적으로 /register?plan=private가 됩니다.router.push({ path: '/register', query: { plan: 'private' } })// 해시와 함께 사용, 결과적으로 /about#team가 됩니다.router.push({ path: '/about', hash: '#team' }) 2024. 8. 3. options API vs Composition API (vue.js) options API vs Composition API 2023. 1. 8. wathcer (vue.js) watch는 단순히 데이터 변경에 반응하기 보다 일반적인 방법을 제공한다. watch는 변경이 일어났을 때 특정행위를 할 수 있도록 해준다. 언제 사용하는지? - 속성이 변경됨을 감시하고 퍼포먼스를 구현하려고 할 때 - API통신 responce에 대해 사용 (데이터를 바로바로 감시) watch(newValue, oldValue){} - 첫번째 인자: 바뀐 값 - 두 번째 인자: 바뀌기 전 값 Volume Tracker (0-20) Current Volume - {{ volume }} Increase Decrease data가 object형태 일 때 1. 기존 volume 함수를 객체형태로 바꿈 2. handle함수 생성 3. deep: true Volume Tracker (0-20) Current Vo.. 2023. 1. 5. 이전 1 2 3 4 다음 728x90 반응형
