以下完全是vue.js 官方的介绍,可以解决使用过程中对于导入和顶层变量、函数在模板中可以直接使用的理解。
官方:通过组合式API,我们可以使用导入的API函数来描述组件逻辑。在单文件组件中,组合式API通常会或<scripte setup>搭配使用。这个setup attribute是一个标识,告诉Vue需要在编译时进行一些处理,让我们可以更简洁的使用组合式API。比如,<script setup> 中的导入和顶层变量/函数都能够在模板中直接使用。
下面是使用了组合式 API 与 <script setup>
改造后和上面的模板完全一样的组件:
<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 @click="increment">Count is: {{ count }}</button>
</template>