Vue.js脚本设置的详细指南Vue.js的Composition API是一个方便的工具，可以在多个组件中创建可重用的

Vue.js的Composition API是一个方便的工具，可以在多个组件中创建可重用的、有状态的代码。然而，它不仅仅是用来创建可重用的可组合物。该API存在的时间越长，使用它的人就越多，甚至作为他们所有组件的默认样式。

考虑到工作流程，这确实有很大的意义。如果许多可重用的部件现在被做成可组合的，那么在组合API中编写你的部件的具体逻辑，使与所述可组合的互动成为一个更无缝的过程。

锦上添花，真正使这种方法令人愉快的，是script setup 语法。

如果你使用过Composition API，并且感觉有些繁琐，那么script setup 语法将是一个令人愉快的使用。

让我们快速看一下它是如何工作的。

一个没有脚本设置的组件

在脚本设置之前，你可能有一个看起来像这样的组件。

<template>
    <MyComponent/>
    <button @click="greet">{{btnText}}</button>
</template>
<script>
import {ref} from "vue"
import MyComponent from "./MyComponent.vue"

export default{
  components:{ MyComponent },
    setup(){
    const btnText = ref("Greet Awesome Dev")
    const greet = ()=> alert("Hello!")
        return { btnText, greet }
  }
}
</script>

注意一些事情。

我们必须在导出的对象中声明一个设置方法。
```
export default {
  //...
  setup(){}
}
```

为了注册一个组件，你必须先导入它，然后用组件选项注册它。


import MyComponent from "./MyComponent.vue"
//...
components:{ MyComponent },

最后，如果我们需要访问模板中设置方法的任何内容，必须从设置中导出。
```
return {btnText, greet}
```

这些事情都不是世界末日，但体验可以更好。特别是，#3。我无法告诉你有多少次我把我的状态和逻辑都设置好了，只是在测试的时候发现我忘记了添加返回。

一个有脚本设置的组件

现在让我们来看看同样的组件与script setup 。

<template>
  <MyComponent/>
    <button @click="greet">{{btnText}}</button>
</template>
<script setup>
    import {ref} from "vue"
    import MyComponent from "./MyComponent.vue"
    const btnText = ref("Greet Awesome Dev")
    const greet = ()=> alert("Hello!")
</script>

这种方法不仅简短，而且噪音和模板也更少。让我们把它分解一下。

首先，没有更多的设置方法需要声明，也没有更多的对象需要输出。相反，我们只是在脚本标签中添加了setup 。
组件注册被减少到一行（导入本身）。
最后，可能也是最重要的一点，我们再也不用记住返回任何数据或函数来将它们暴露给模板。它是自动为我们完成的!

这不是很好吗！？这是一个相当简单的变化，但在经常使用组合API时，它确实带来了巨大的变化。

其他脚本设置提示

最后，上面提供的简单步骤在很多时候会让你顺利完成，但还有一些其他的事情值得一提。

使用或不使用

这不是全部或没有。脚本设置是完全可以选择的，你可以在你现有的Vue 3项目中逐步采用它。你甚至可以在同一个组件中使用传统的脚本标签，同时使用script setup 标签。


<script setup>
    //... logic and such
</script>
<script>
export default{
    name: "MyComponent",
    inheritAttrs: false,
  props:{
    msg: { type: String, default: "Hello!" }
  },
}
</script>

定义道具

要定义道具，你可以像上面那样在一个单独的脚本标签中进行，但Vue也提供了一个编译器级别的微型标签，叫做defineProps ，允许你在script setup 中做同样的事情。

<script setup>
  const props = defineProps({
        msg: { type: String, default: "Hello!" }
    })
    //... logic and such
</script>

如果你需要从script setup 内访问这些道具，这是很有必要的。

另外，作为一个编译器微观，defineProps 只在脚本设置中可用，不需要被导入。

定义Emits

像道具一样，defineEmits micros也提供了定义你的组件可以触发哪些事件，以及提供你对发射函数的访问。

const emit = defineEmits(['updated', 'done'])
//...
emit("done")

为已建项目提供的一个功能

最后，脚本设置是一项功能，旨在用于包括构建步骤的项目中。它依赖于模板编译，通常情况下，你不应该把模板编译器送到浏览器中。

然而，如果你想要一个快速入门的操场来搞清楚脚本设置，官方的Vue SFC操场和Stackblitz的vite.new/vue，都是不错的选择。

总结

Composition API是对Vue JavaScript框架的一个很好的补充，而script setup 功能确实使它成为日常每个组件使用的可行选择。