Vue:문법 편집하기 (부분)

=API 사용=
Options API와 Composition API가 있다.

공식문서에선 같은 기능을 다음과 같이 짤 수 있다 소개한다.
{| class="wikitable"
|+
!Options API
!Composition API
|-
|
*인스턴스 중심.
*초보자 친화적.
|
*직접 설계.(복잡한 작업을 처리하기 위한 것)
*더 자유로움.
*재사용성에 더 유리함.
|-
|<syntaxhighlight lang="javascript">
<script>
export default {
  // 담는 데이터
  data() {
    return {
      count: 0
    }
  },
  // 실행할 함수
  methods: {
    increment() {
      this.count++
    }
  },
  // HTML 태그에 마운트 될 때의 동작.
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>
</syntaxhighlight>
|<syntaxhighlight lang="javascript">
<script setup>
import { ref, onMounted } from 'vue'
// reactive state
const count = ref(0)
// functions that mutate state and trigger updates
function increment() {
  count.value++
}
// lifecycle hooks
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>
</syntaxhighlight>ref, onMounted 등 필요한 기능을 사용할 줄 알아야 한다.

프레임워크 자체에 익숙해야 자유자재로 다룰 수 있는 형태.
|-
|
|
|}
react에선 data를 담는 공간을 state라고 부르는데(각종 상태를 저장하니까), vue에서도 동일하게 사용하는 경우가 많다.

data 안에서 정의된 것이 아니라 자유롭게 자바스크립트를 이용하여 변수를 추가할 수도 있는데, 다른 방법으로 추가된 변수들은 추후 조작이 어렵다.