Vue - Computed, 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>