Vue

computed

하나의 계산된 데이터로 취급하여 여러번 사용할 때 캐싱을 통해
따로 또 함수를 동작시키지 않아도 되어 반복적 출력 연산 낭비 X

객체내의 대상에서만 의존성에 영향을 받아 다른 객체내의 대상값이 바뀌어도 영향받아 동작을 하지않는다. => 최적화가 잘 되어있다.

computed안의 this대상이 변경이 된다면 computed안의 내용이 다시실행된다.

computed 예시

<div id="computed-basics">
  <p>출판된 책:</p>
  <span>{{ publishedBooksMessage }}</span>
</div>
</body>
<script>

  Vue.createApp({
    data() {
      return {
        author: {
          name: '존 도우',
          books: [
            'Vue 2 - Advanced Guide',
            'Vue 3 - Basic Guide',
            'Vue 4 - The Mystery'
          ]
        }
      }
    },
    computed: {
      // computed getter
      publishedBooksMessage() {
        // 여기서의 `this` 는 vm 인스턴스이다.
        return this.author.books.length > 0 ? '있음' : '없음'
      }
    }
  }).mount('#computed-basics')
</script>

주의할 점은 computed의 내용으로 사용할 함수부분은 데이터로 취급되어 태그내에서 사용할 때는 publishedBooksMessage()가 아닌 publishedBooksMessage로 사용한다.

computed의 주의할점

<div id="app">
<h1> {{fullName}}</h1>
</div>
</body>
<script>

  const App = {
    data() {
      return {
        firstName : 'Leon',
        lastName : 'Miller'
      }
    },
    computed : {
      fullName(){
        return `${this.firstName} ${this.lastName}`
      }
    }
  }
  const vm = Vue.createApp(App).mount('#app')
</script>

해당 내용 후에 vm.fullName = 'kim hyoungwook'를 실행하면 변화된 값이 h1태그의 content에도 적용될거라고 생각하지만 그렇지않다.

해당 링크의 맨 마지막을 보면 Computed properties are by default getter-only, but you can also provide a setter when you need it:라고 한다.
즉, getter만 쓸수있지만 setter를 쓸 방법은 있다는 것이다.

const App = {
   data() {
     return {
       firstName : 'Leon',
       lastName : 'Miller'
     }
   },
   computed : {
     fullName: {
     // getter
       get() {
         return this.firstName + ' ' + this.lastName
       },
     // setter
       set(newValue) {
         var names = newValue.split(' ')
         this.firstName = names[0]
         this.lastName = names[names.length - 1]
       }
     }
   }
 }

해당 fullName을 이와같이 수정하면 원하는 결과를 얻을 수 있다.

watch

어떠한 동작에 대해 해당 동작을 감지하는 역할

watch 예시

<div id="app">
<h1> {{user.age}}</h1>
</div>
</body>
<script>

  const App = {
    data() {
      return {
        user : {
          name : 'Leon',
          age:22
        }
      }
    },
    watch : {
       user(newValue, oldValue){
         console.log(newValue, oldValue)
       }
    }
  }
  const vm = Vue.createApp(App).mount('#app')
</script>

1. 변화된 user의 값으로
   첫번째 매개변수는 바뀐 값인 newValue를
   두번째 매개변수는 이전 값인 oldValue를 갖는다.
2. watch의 경우 기본적으로 user를 관찰하려면 user의 세부사항이 변경되어도 반응하지않는다. (user 자체가 변경되어야 반응한다.)

객체내의 변화 감지하는 방법

watch : {
      user : {
        handler(newValue,oldValue){
          console.log(newValue,oldValue)
        },
        deep:true
      }
    }

handler라는 것과 deep:true를 설정하면 객체내의 값이 변경되어도 해당 변화를 감지한다. (vm.user.age = 100에 대한 변화 감지 )

+a

fetch를 통해 가져온 데이터는 특정부분에서만 사용되는 것이 아니기에 최대한 범용적으로 만들어야한다.

ex)
fetch를 통해 받아온 res를 바로 소문자에서 대문자로 변경 (x)

fetch를 통해 받아온 res를 computed 옵션에서 소문자에서 대문자로 변경하는 함수로 작성하여 사용 ( 기존에 res를 범용적으로 사용 가능 )