语法风格

Composition API

<!-- 推荐 -->
<script setup>
  import { ref, computed } from 'vue'

  const count = ref(0)
  const double = computed(() => count.value * 2)

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

Options API

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

常见问题

不要忘记 setup 原始写法

提示

<script setup> 是 Vue3.2 引入的语法糖。

原始写法

<script>
  import { ref } from 'vue'

  export default {
    setup() {
      const count = ref(0)

      const increment = () => {
        count.value++
      }

      return {
        count,
        increment,
      }
    },
  }
</script>

setup 语法糖

<script setup>
  import { ref } from 'vue'

  const count = ref(0)

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