API风格

选项式API

它使用含多个选项的对象描述组件的路基，如data、methods、mounted。它的定义方式是卸载export default上。选项定义的属性都会暴露在函数内部的this上，它会指向当前组件的实例。

<Script>
export default {
    data() {
        return {
            count: 0
        }
    },
    methods: {
        increment() {
            this.count++
        }
    },
    mounted() {
        console.log(`The initial count is ${this.count}`)
    }
}
// 所有的特性都写在这里面，这就是选项式API
</Script>
<template>
  <button @click="increment">
      Count is {{ count }}
    </button>
</template>

组合式API

它可以使用导入的API函数描述组件逻辑。

<script setup>
import { ref, onMounted } from 'vue'
const count = ref(0)
function increment() {
    count.value++
}
onMounted(()=>{
 	console.log(`The initial count is ${count.value}`)
})
    // 使用导入函数实现组件逻辑
</script>
<template>
  <button @onclick='increment'>
    Count is {{ count }}
  </button>
</template>

选择API风格

两种API风格都能覆盖大部分的应用场景，它们之时同一个系统底层提供两套的不同接口。选项式API是在组合式API的基础上实现的，关于Vue的基础概念和知识在它们之间都是通用的。在生产项目中，若我们不打算使用构建工具，或在低复杂度的场景使用Vue，推荐使用选项式API。若使用Vue构建完整的单页应用，则可以采用组合式API。

版权所有

许可证：署名 4.0 国际 (CC-BY-4.0)