Vue.js Composition API(feat."methods:{}", "computed:{}", "watch:{}")

강정우·2023년 4월 7일

목록 보기

41/72

methods 변환

Options API

<tamplate>
	...
	<button @click="마크업함수">변환!</button>
    ...
</template>

<script>
export default {
	data(){
    	...
    },
    methods:{
    	마크업함수(){
        	...
        }
    }
]
</script>

Composition API setup()

<tamplate>
	...
	<button @click="마크업함수">변환!</button>
    {{ 함수1 }}
    ...
</template>

<script>
setup(){
	function 함수1 () {
    	...
    }
    
    ...
    
    return { 마크업함수 : 함수1 }
}
</script>

computed 변환

근데 computed:{}를 안 쓰고 computed() 메서드를 쓴다 ㅋㅋ
computed(function(){}, ) 여기서 function(){}에 사용된 의존성을 자동으로 Vue가 function() 함수를 실행하면서 return문에서 지정한 의존성의 변화를 파악하고 자동으로 두 ref의 변화를 파악한 후에 변화가 있으면 연산 프로퍼티를 업데이트할 것이다.
이때 computed함수 내부 함수에 this. 키워드는 사용하지 않아도 된다. 왜냐하면 이미 ref 키워드로 참조하고있기 때문에 그냥 변수 이름만 갖다 써도 된다.
- 대신 ref를 쓰니까 .value 는 필요하다.

Composition API setup()

<template>
  <h1>{{fullName}}</h1>
  <input type="text" placeholder="First Name" @input="setFirstName"/>
  <input type="text" placeholder="Last Name" @input="setLastName"/>
</template>

<script>
import {reactive, ref, computed} from 'vue';

export default {
	setup(){
      const firstName = ref("");
      const lastName = ref("");
      const setFirstName = (event) => {
          firstName.value = event.target.value;
      }
      const setLastName = (event) => {
          lastName.value = event.target.value;
      }
      
      const fullName = computed(function(){
      	return firstName.value + " " + lastName.value;
      });
      
      console.log(fullName.value);
      
      return {setFirstNanme, setLastName, fullName}
	}
}
</script>

연산 프로퍼티는 내부적으로는 ref에 해당한다. 따라서 .value를 사용해 값에 액세스할 수 있지만 이 ref는 파일을 읽기만 할 수 있다는 점이 매우 중요하다!!
적, computed() 로 선언된 변수는 readonly 하다고 생각하면 된다.
또 마크업 단에서는 Vue가 알아서 처리하기 때문에 .value는 쓰지 않는다!!

v-model

ref, reactive값을 사용할 수 있다. 무슨 말이냐
- 위 코드처럼 @input="메서드" 하고 메서드에서 .value 접근하여 합쳐주는 로직을 짤 필요가 없이
- v-model="변수" 하면 알아서 접근하여 처리해준다는 말이다.

<template>
  <h1>{{fullName}}</h1>
  <input type="text" placeholder="First Name" v-model="firstName"/>
  <input type="text" placeholder="Last Name" v-model="lastName"/>
</template>

<script>
import {reactive, ref, computed} from 'vue';

export default {
	setup(){
      const firstName = ref("");
      const lastName = ref("");
      
      const fullName = computed(function(){
      	return firstName.value + " " + lastName.value;
      });
      
      return {fullName, firstName, lastName}
	}
}
</script>

단, setup()는 반드시 return문에 마크업 컴포넌트에서 사용될 값들이 전부 명시되어있어야한다!

watch 변환

"데이터 변경"에 따라서 내부적인 HTTP 요청을 설정하는 것과 같은 코드 실행 시 watch를 유용하게 쓸 수 있다.

Options API

<script>
export default {
	data(){
    	age : 27
    },
    watch(){
    	age(val){
        	console.log(val)
        }
    }
}
</script>

이런식으로 통상 data와 이름을 갖게하여 watch를 만들어왔다.
Composition API setup() 에서의 watch는 2개의 인수를 필요로 한다.
- 첫 번째 인수는 이 함수의 의존성(Dependency)인데 이 함수에 감시자 함수를 실행할 시점을 알려준다.
- 두 번째 인수는 실제 호출 대상인 함수이다.
Options API를 사용할 때 의존성은 감시 메서드의 이름에 불과했는데
Composition API는 감시 함수가 되었기 때문에 여전히 함수에 감시자 함수를 실행할 시점을 알려주려면 의존성을 먼저 지정해야 한다.

즉, 첫번째 인수에 변화가 생기면 두번째 인수가 실행된다.

<template>
      <h1>{{uName}}</h1>
      <h2>{{uAge}}</h2>
      <button @click="setNewData">Change Age</button>
      <div>
          <input type="text" placeholder="First Name" v-model="firstName"/>
          <input type="text" placeholder="Last Name" v-model="lastName"/>
      </div>
  </section>
</template>

<script>
import {computed, reactive, ref, watch} from 'vue';
export default{
	setup(){
    	const user = reactive({name:'헬창',age:27})
        const firstName = ref("");
        const lastName = ref("");
        const uAge = ref(27);

        const setNewData = () => {
            uAge.value=32
        }
        const uName = computed(()=>{
            return firstName.value+lastName.value
        })

        watch([uAge, uName],(newValues, oldValues)=>{
            console.log("oldAge : "+oldValues[0])
            console.log("newAge : "+newValues[0])
        })
      
        watch(enteredSearchTerm,(newValue)=>{
          setTimeout(() => {
            if (newValue === enteredSearchTerm.value) {
              activeSearchTerm.value = newValue;
            }
          }, 300);
        })
      
        return {firstName, lastName, uName, uAge}
    }
}
</script>