Vue - Computed, Watch

2023. 11. 27. 12:56· 📗 Vue.js
목차
  1. Computed
  2. Watch

Computed

계산이 필요한 데이터를 사용할 때, computed 옵션을 사용하면 매번 계산을 하지 않고 첫번째 만들어진 결과를 캐싱해서 계산된 데이터를 다시 사용할 수 있다. ( methods는 계산 데이터를 사용할 때마다 계산을 한다 )

<div id="app">
      <h1>{{count}}</h1>
      <h2>{{double}}</h2> // 처음 계산된 데이터를 캐싱하여 다시 계산을 하지 않고 그대로 사용
      <h2>{{double}}</h2>
      <h2>{{double}}</h2>
      <h2>{{double}}</h2>
    </div>
    <script>
      const App = {
        data() {
          return {
            count: 3,
          };
        },
        computed: {
          double() {
            // 메서드가 아니라 하나의 데이터로 취급된다
            return this.count * 2;
          },
        },
      };
      const app = Vue.createApp(App);
      app.mount("#app");
    </script>

계산된 데이터를 이용하여 내가 원하는 대로 데이터를 수정하여 사용할 수 있다

<div id="app">
      <ul>
        <li v-for="todo in upperTodos">{{todo.title}}</li>
      </ul>
    </div>
    <script>
      const App = {
        data() {
          return {
            todos: [],
          };
        },
        computed: {
          upperTodos() {
            return this.todos.map((todo) => ({
              ...todo,
              title: todo.title.toUpperCase(),
            }));
          },
        },
        created() {
          fetch("https://jsonplaceholder.typicode.com/todos")
            .then((res) => res.json())
            .then((res) => {
              console.log(res);
              this.todos = res;
            });
        },
      };
      const vm = Vue.createApp(App).mount("#app");
    </script>

Watch

  • 반응형 데이터가 변경되는 것을 감시하고, 변경될 때마다 정의한 함수가 실행된다

deep

  • 객체 또는 배열 같은 참조형 데이터를 감시할 때 데이터 내부 일부 변경에 대해 감시하기 위해 깊은 감시를 해야한다
  • handler 메서드와 같이 사용

immediate

  • 즉시 실행
  • 데이터가 변경 또는 초기화 되었을 때 즉시 실행된다(즉시 감시)
<script>
      const App = {
        data() {
          return {
            user: {
              name: "Leon",
              age: 22,
            },
            fruits: [
              { id: 1, name: "Apple" },
              { id: 2, name: "Banana" },
              { id: 3, name: "Cherry" },
            ],
          };
        },
        watch: {
          user: {
            handler(newValue, oldValue) {
              console.log(newValue, oldValue);
            },
            deep: true,
          },
          fruits: {
            handler() {
              console.log(this.fruits);
            },
            deep: true,
            immediate: true,
          },
        },
        methods: {
          capitalize() {
            this.fruits.forEach((fruit) => {
              fruit.name = fruite.name.toUpperCase();
            });
          },
        },
      };
      const vm = Vue.createApp(App).mount("#app");
    </script>

 

'📗 Vue.js' 카테고리의 다른 글

Vue - 이벤트 핸들링  (0) 2023.11.29
Vue - 렌더링  (0) 2023.11.28
Vue - 템플릿 문법  (0) 2023.11.24
Vue - 라이프사이클  (0) 2023.11.24
  1. Computed
  2. Watch
'📗 Vue.js' 카테고리의 다른 글
  • Vue - 이벤트 핸들링
  • Vue - 렌더링
  • Vue - 템플릿 문법
  • Vue - 라이프사이클
zunwon
zunwon
zunwon
준원의 개발일지
zunwon
전체
오늘
어제
  • 분류 전체보기
    • 📒 JavaScript
    • 📘 TypeScript
    • React.js
    • 📗 Vue.js
    • 💻 알고리즘
      • 프로그래머스
      • 백준
    • ✏ 회고
      • 후기
    • 👨‍💻 TIL
    • 📋 오픈소스
    • 기타

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • Vue
  • next.js
  • udemy
  • 프로그래머스
  • githru
  • 프론트엔드
  • 미래내일일경험
  • Vue.js
  • vercel
  • 프로젝트캠프
  • 알고리즘
  • til
  • 프로그래머스 데브코스
  • TypeScript
  • 오픈소스컨트리뷰션
  • 함수형자바스크립트
  • mil
  • fontend
  • 부스트캠프
  • 회고
  • 인사이드아웃
  • 데브코스
  • 자료구조
  • 국비지원교육
  • 스나이퍼팩토리
  • frontend
  • 함수형 자바스크립트
  • 코딩부트캠프
  • css
  • JavaScript

최근 댓글

최근 글

hELLO · Designed By 정상우.v4.2.1
zunwon
Vue - Computed, Watch
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.