v-bind:value="" 로 reset 구현

• react 에서도 자주 사용하던 패턴으로 state의 value값을 해당 input tag에 넣어서 동기화시켜주는 작업을 했었다.

• 마찬가지로 vue도 이러한 기능이 있고 사용법은 아래와 같다.

index.html

<input type="text" v-bind:value="name" v-on:input="setName($event, '강')" v-on:keyup.enter="confirmInput">
<p>Ur name is : {{ confirmName }}</p>
<button v-on:click="resetInput">reset input</button>

app.js

...
    resetInput(){
      this.name = ""
    }
...

• 하지만 위와같은 패턴을 매우 자주 사용하는 vue는 이를 단순화한 특수 내장 directive가 존재한다.

v-model

• v-model은 v-bind:value, v-on:input 을 합친것과 같다.
  그냥 mvc의 model이라고 이해하면 편할 듯 하다.

• 이는 vue의 state와 html의 input 값이 서로 통한다는 뜻에서 two-way-binding 이다.

index.html

<input type="text" v-model="name">

computed prop

문제점

{{ useFunc() }}의 단점

• 무슨말이냐면 app.js의 method prop에 선언된 함수를 index.html에서 pointing이 아닌 실행()할 경우는 vue에서 자동으로 랜더링을 진행한다. => 다른 interpolation 안에 들어있는 prop이 재랜더링되면 같이 재랜더링 되어버린다는 뜻이다.

• 왜일까? vue는 method가 하는 일을 알 수 없기 때문이다. 그래서 Vue는 html에 있는 이벤트에 v-bind되지 않은 모든 메서드들을 실행해버린다.

해결법 computed props

• computed 속성은 data, method와 함께 vue app을 이루는 속성값으로
  모양세는 method에 가깝지만 쓰임세는 data에 가깝다.

• computed는 즉, react의 useEffect와 비슷하다. 그리고 의존성은 [] 로 주입하는 것이 아닌 연산자를 통하여 vue가 알아서 의존성을 인식한다.

  computed:{
    fullname(){
      if(this.name === ""){
        return ""
      }
      return this.name + " " + "강"
    }
  },

• 즉, 얘같은 경우는 this.name을 vue가 알아서 의존성으로 인식하여 index.html에서 interpolation안에 기재해주면 의존성 변경에 따라서 알아서 업데이트를 해준다. 이것이 method와 computed 속성의 차이점이다.

computed 값을 캐시에 저장하고 의존성 중 하나라도 변경된 경우에만 재계산하고 재평가합니다
이는 method는 페이지가 어떤 항목이든 상관없이 재계산되어야하는 곳에 사용되어야한다고 볼 수 있다.

watcher

• watcher는 기본적으로 의존성 중 하나가 변경될 때 Vue에 실행하도록 지시할 수 있는 함수이다. 이는 마치 computed property 처럼 들리는데 실제로 대체 가능하기도 하다.

• 이는 computed, data, method와 같이 watch라는 속성이름으로 함께 사용된다.

• watch 속성도 computed, method와 같이 객체형태를 띄고 있다.

• watch는 data, computed 속성에 씌였던 값을 사용할 수 있다. 그래서 만약 같은 이름의 속성값(data, computed)이 바뀌었다면 watcher에 있는 같은 이름의 해당 메서드가 실행된다.

• 또한 watch의 값들은 인수로 자동적으로 value라는 값을 갖게되는데 이 value는 data에 같은 이름으로 등록된 최신 snap shot을 가져온다.

  watch:{
    name(value){
      this.fullName = value + " " + "강"
    }
  },

• 또 2개를 인수로 받을 수도 있는데 이때는 먼저온 것이 최신 value, 뒤에 온 것이 이전 value가 된다.

  watch:{
    name(newValue, oldValue){
		...
    }
  },

• 하지만 computed와 차이점은 무엇일까? 바로 의존성에서의 코드양에 차이가 있다.
  watcher는 data의 각 속성값마다 watch를 추가해주어야하지만 computed는 코드 하나로 알아서 의존성을 인식하기 때문에 훨씨니 편하다.

watch 속성을 이용하여 작성

  watch:{
    name(value){
      if(value === ""){
        this.fullName = ""
      }
      this.fullName = value + " " + this.lastName
    },
    lastName(value){
      if(value === ""){
        this.fullName = "";
      }
      this.fullName = this.name + " " + value
    }
  },

computed 속성을 이용하여 작성

  computed:{
    fullname(){
      if(this.name === ""){
        return ""
      }
      return this.name + " " + this.lastName
    }
  },

• 그럼 굳이 왜씀? => 사실 watch의 용도는 computed처럼 의존에 맞춰 로직을 실행하도록 만들어진 것이 아니다.
  그럼 어떨 떄 씀? => 초기화 구문에 사용된다.

counter(value){
	if(value > 50) {
      const that = this;
      setTimeout(function () {
        that.counter = 0
      }, 2000);
	}
}

• 또 특정 데이터가 변경되면 보내는 http request, 특정 값이 변경되면 설정되는 timer 정도가 되겠다.

모든 프로퍼티 변화가 아닌 일부 프로퍼티의 변화에 반응하여 데이터 프로퍼티를 업데이트하려는 경우
즉, 뭔가가 변경되어 코드를 실행할 땐 watcher가 유용할 수 있다.
반면, 출력값을 동적으로 계산할 때는 computed가 더 유리하다.

method vs computed vs watch 정리

method

• 메서드는 템플릿에서 데이터를 바인딩할 때 쓸 수 있다. 예를 들면 데이터를 interpolation에 사용하기 위해서

• 혹은 이벤트 바인딩을 위해서도 메서드를 사용할 수 있다.

• 즉, 중괄호 사이에 메서드를 사용해서 템플릿에서 Vue 인스턴스로 로직을 아웃소싱하는 경우 메서드는 컴포넌트의 리렌더링 주기에 맞춰 매번 실행된다.

• 그러므로 변동 사항이 생기면 템플릿을 재평가하고 해당 템플릿에 호출된 모든 메서드를 다시 호출한다

• 그러므로 페이지에 변동 사항이 있을 때마다 메서드가 재실행되길 원한다면 이벤트 바인딩에는 메서드를 주로 사용해야 한다. 또는 데이터 바인딩의 경우에는 중괄호와 함께 사용한다.

computed

• computed 프로퍼티는 데이터 바인딩에만 쓰인다.

• 이벤트 바인딩엔 computed 프로퍼티를 쓰지 않는다. 게다가 computed 프로퍼티는 다른 데이터를 기반으로 하는 데이터를 가져오기에 유용하며 의존하는 데이터가 바뀔 때만 Vue에 의해 재평가하거나 재실행된다는 장점이 있다.

• 다른 데이터가 바뀔 때는 연산 프로퍼티를 재평가하지 않는다.

• 그러므로 연산 프로퍼티는 다른 데이터에 의존하는 데이터에 사용해야한다.

watcher

• 템플릿(index.html)에서 직접 사용하지 않는다.

• 템플릿 내부에서 참조하지 않지만 computed 프로퍼티를 포함해 어느 프로퍼티든 watvher로 참조할 수 있다.

• 게다가 데이터 변경에 대한 반응을 코드로 실행할 수 있다.

• 예를 들어 HTTP 요청을 보내거나 타이머를 설정하거나 로컬 스토리지에 데이터를 저장하는 작업 등이 있다.

• 주로 data가 아닌 업데이트에 watch를 사용해야 합니다 바뀌는 데이터를 토대로 데이터가 아닌 내부에서 업데이트하는 작 업이 있을 때는 watch를 사용하는 게 좋습니다

• 이 세 가지 중에서 watcher의 사용 빈도가 가장 낮다. 왜냐면 이벤트 바인딩에는 항상 메서드를 사용하고 다른 데이터에 의존하는 데이터 출력엔 computed 프로퍼티를 사용하기 때문이다.

@

• @ 연산자는 v-on을 대체한다.

<button v-on:click="resetInput">reset input</button>

<button @click.left="resetInput">reset input</button>

• 또한 modifier도 사용 가능하다.

:

• 사실 : 는 v-bind: 에서 v-bind만 날렸다고 봐도 무방하다.

<input type="text" v-bind:value="name" v-on:input="setName($event, '강')" v-on:keyup.enter="confirmInput">

<input type="text" :value="name" @input="setName($event, '강')" @keyup.enter="confirmInput">

• 참고로 v-model의 축약어는 없다.
  또 한 번 축약어를 쓴다면 모든 문법을 통일시켜줘야한다.