본문 바로가기

vue

(11)
vite 화면 자동 새로고침 설정 vite.config.js에 빨간 네모 박스 부분 추가
[Vue 3] markRaw 함수 언제쓰나? Vue.js에서 markRaw 함수는  말 그대로 반응형이 아닌 파라미터를 날것으로 만든다는 뜻입니다.(객체든 컴포넌트든) 이 함수는 주로 성능 최적화나 특정 객체를 반응형으로 만들고 싶지 않을 때 사용합니다.기본 사용법 {{ state.user.name }} 의 나이는 {{ state.user.age }} 나이먹어라...많이 먹어라... 32살로 변경된 값이 먼저 보이면서 버튼을 누르면 값이 바뀌면서 watch 메서드를 타지만markRaw 함수를 사용하면 초기나이 바뀐나이의 로그만 나오고 버튼을 눌러도 watch 메서드를 안타는 걸 확인 가능합니다. 언제 쓸까??1. 성능 최적화   큰 데이터나 복잡한 객체를 다룰 때 Vue 의 반응성 시스템이 모든 속성을 추적하지 않도록 하여, 성능향상  {{ ..
[Vue 3] [SFC] 2. <script setup> Vue 3.1에서 3.2로의 마이너 업데이트를 하면서 , TypeScript 환경과 더욱 간단한 composition api 를 사용하도록 등장한게 script setup 구문이다. (하지만 ts를 사용하지 않아도 script setup 은 사용가능하다) 일반 이에 비해 script setup 은 깔끔하다... 특히 기존 compositions api 에서도 귀찮았던건 아래 options 처럼 결국 같은 compnents를 세번이나 연달아 써줘야한다는 거다... 단 숙지해야 할 점은 기존 composition api 처럼 export defaut 로 모든 변수와 메서드를 공개적으로 열어놓는것이 아니어서 부모 컴포넌트에서 임포트해서 사용할 때는 defineExpose 안에서 아래처럼 변수나 메서드 이름을 ..