https://cn.vuejs.org/guide/introduction.html#api-styles
Vue的API有两种风格:选项式 API (Options API)、组合式 API (Composition API)。
在单文件组件中,组合式 API 通常会与 <script setup>
搭配使用。这个 setup
属性是一个标识,告诉 Vue 需要在编译时进行一些处理,让我们可以更简洁地使用组合式 API。它其实就是一个开关,允许在script中书写组合式API。
下面是选项式API的用法:
<script>
export default {
// data() 返回的属性将会成为响应式的状态
// 并且暴露在 `this` 上
data() {
return {
count: 0
}
},
// methods 是一些用来更改状态与触发更新的函数
// 它们可以在模板中作为事件处理器绑定
methods: {
increment() {
this.count++
}
}
}
</script>
<template>
<button @click="increment">Count is: {{ count }}</button>
</template>
下面是组合式API的用法:
<script setup>
import { ref } from 'vue'
// 响应式状态
const count = ref(0)
// 用来修改状态、触发更新的函数
function increment() {
count.value++
}
</script>
<template>
<button @click="increment">Count is: {{ count }}</button>
</template>