Vue의 computed와 methods와 비교 | computed의 getter & setter 세팅

Coumpted 기초템플릿 표현식 내의 코드가 길어질 경우 가독성이 떨어지니 computed (계산된 속성)을 사용한다. 🎈computed vs methodsmethod를 사용하면 computed와 동일한 효과를 얻을 수 있다.하지만 computed는 결과가 캐시되고, method는 매번 실행된다.computed는 내부 반응형 데이터가 변경될 경우 다시 계산하기 때문에 computed가 더 효율적이다.다만, method는 파라미터를 활용할 수 있다. 🎈Writable computed기본적으로 computed는 getter 전용이다.하지만 필요한 경우 getter와 setter 모두 제공하여 속성을 만들 수 있다. const fullName = computed({ get() { return fi..

• format_list_bulleted 🧠 저장/Vue
• · 2024. 4. 24.
• textsms

Vue의 조건부 렌더링(v-if, v-show) 비교 | v-for과의 병행 사용?

조건부 렌더링🎈v-if 와 v-showv-if는 false일때는 렌더링되지않고 true일때만 렌더링된다.v-show는 조건에 관계 없이 항상 렌더링 된다. (false 일 경우 css display:none 속성으로 전환) v-if는 전환 비용이 높다.v-show는 초기 렌더링 비용이 높다. 즉, 무언가를 자주 전환해야한다면 v-show를 사용하고,런타임 조건이 변경되지 않는다면 v-if가 낫다. 🎈v-if 와 v-forv-if와 v-for은 함께 쓰는 것을 권장하지 않는다.동일하게 사용할 경우 v-if가 더 높은 우선순위를 갖는다.

• format_list_bulleted 🧠 저장/Vue
• · 2024. 4. 24.
• textsms

Vue3의 반응형 데이터(Reactivity) | 반응형 데이터의 구조분해와 변경방지

반응형 기초💥 반응형 상태 선언하기1. reactive()자바스크립트 객체에서 반응형 상태를 생성하려면 reactive() 함수를 사용한다. import { reactive } from 'vue'const tay = reactive({ level: 0 })객체, 배열 같은 레퍼런스 타입도 반응형 객체로 만들 수 있다.const tay = reactive({level:0, dev: { count: 0, } })    이러한 reactive()는 뎁스가 깊어도 잘 동작한다.즉, 위 코드에서 reactive로 tay.dev.count에도 반응한다.참고로 Options API의 data에서 객체를 반환할 때, 내부적으로 reactive()에 의해 만들어진다.  2. ref()number, string, boo..

• format_list_bulleted 🧠 저장/Vue
• · 2024. 4. 23.
• textsms

Vue3는 Vue2와 어떤 점이 다를까 | Option API와 Composition API 비교

Vue3✔️ Vue2와 Vue3의 차이점- 라이브러리 내부 로직이 타입스크립트 기반으로 재작성되었다.- 주요 개발 도구의 변경 ( Vetur → Volar)- 컴포지션 API, Teleport 등 새로운 문법 지원- 리액티비티 시스템 기반 API 변경- 공식 문서 변경 : https://vuejs.org/  ✔️ 인스턴스 생성 방식의 차이Vue2에서 인스턴스 생성 방식// 1new Vue({ el: '#app'})// 2new Vue({ // 어쩌구}).$mount('#app') Vue3에서 인스턴스 생성 방식Vue.createApp({ //어쩌구}).mount('#app')  이 외에도 vue3를 사용하는 많은 이유가 있지만,결정적인 이유는vue2가 2023년 12월 31일부로 지원이 종료됐기 때문 ^..

• format_list_bulleted 🧠 저장/Vue
• · 2024. 3. 27.
• textsms

v-bind와 v-model의 간단 차이점

v-bind와 v-model의 차이점 v-bind는 단방향, v-model은 양방향 바인딩. 양방향이면 그저 좋을 거라 무식한 생각을 했지만, 당연하게도 역할에 맞게 써야 한다. 각각의 기능과 역할을 알아보고 쓰임새에 맞게 쓰도록 하자... v-bind v-bind는 데이터를 DOM 요소의 속성에 동적으로 바인딩하는 데 사용된다. export default { data() { return { myData: 'initial value' }; } }; :value는 v-bind:value의 단축 표현이다. :value는 input 요소의 value 속성을 myData에 동적으로 바인딩한다. 그러나 이것은 양방향 바인딩이 아니기 때문에 사용자의 입력은 myData에 반영되지 않는다. 주로 form 요소에 초기..

• format_list_bulleted 🧠 저장/Vue
• · 2024. 1. 27.
• textsms