[Vue.js] 2 vs 3

 

 

data, method ,computed 간단한 문법 정리

 

 

 

Vue 2

 

<template>
  <div id="app">
    <div>Name: {{ name }}</div>
    <div>
      <div>Amount: {{ amount }}</div>
      <button @click="increaseAmount()">Increase Capacity</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data(){
    return {
      name: "Name",
      amount: 3,
    }
  },
  computed: {
  	lowerCaseUsername () {
  		return this.username.toLowerCase()
  	}
  },
  methods: {
    increaseAmount() {
      this.amount+=1
    }
  },
  
};
</script>

 

 

Vue 3

 

<template>
  <div>Name: {{ name }}</div>
  <div>
    <div>Amount: {{ amount }}</div>
    <button @click="increaseAmount()">Increase Capacity</button>
  </div>
</template>
<script>
import { ref } from "vue";
export default {
  setup() {
  	const state = reactive({
          username: '',
          password: '',
          lowerCaseUsername: computed(() => state.username.toLowerCase())
    });
    
    const name = ref('Name');
   
    const amount = ref(3);
    function increaseAmount() {
      amount.value+=1
    }
    
    return { 
    	name, 
        amount, 
        increaseAmount 
    };
  }
};
</script>

 

import

import { ref } from "vue";

Composition API는 Vue의 핵심 기능들을 전부 import하는 대신 직접 선택하여 import할 수 있도록 해줍니다.

사용하기 위한 핵심 기능을 우선 import합니다.

 

 

setup 메소드

setup() {
  
    const name = ref('Name');
   
    const amount = ref(3);
    function increaseAmount() {
      amount.value+=1
    }
    
    return { 
    	name, 
        amount, 
        increaseAmount 
    };
 }

setup 메소드는 Composition API의 핵심입니다.

단어 그대로 컴포넌트의 기능들을 조립(compose)하는 역할을 합니다.

setup 안에 (앞의 예시들처럼) lifecycle hook을 걸거나 반응형 데이터 바인딩, computed 사용 등을 할 수 있습니다.

마지막에는 꼭 return 값을 넣어야합니다.

 

 

 

computed

const state = reactive({
   username: '',
   password: '',
   lowerCaseUsername: computed(() => state.username.toLowerCase())
});
    

 

컴포넌트 내부에서 사용하기 위한 상태에 대한 값으로써

data를 선언하는 대신

state를 선언하고

reactive object로 초기화합니다.

computed 속성도 함께 작성합니다.

 

 

 

See the Pen Vue 3 Function Based API Example by Shirish Nigam (@nigamshirish) on CodePen.

 

 

 

참고 사이트 : velog.io/@bluestragglr/Vue3-%EB%AC%B4%EC%97%87%EC%9D%B4-%EB%B0%94%EB%80%8C%EB%82%98%EC%9A%94