跳至主要内容

options vs composition

Options vs Composition 寫法的差異 (SFC)​

Options​

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++;
    }
  }
}
</script>

<template>
  <button @click="increment">{{ count }}</button>
</template>

Composition​

  • 要加上 setup
<script setup>
import { ref } from 'vue'

const count = ref(0);

const increment = () => {
  count.value++;
}
</script>

<template>
  <button @click="increment">{{ count }}</button>
</template>
備註

回到Vue3 必學知識點列表