vue3.0--<script setup>的使用

1.<script setup>的定义

<script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。当同时使用 SFC 与组合式 API 时该语法是默认推荐。相比于普通的 <script> 语法，它具有更多优势：

• 更少的样板内容，更简洁的代码。
• 能够使用纯 TypeScript 声明 props 和自定义事件。
• 更好的运行时性能 (其模板会被编译成同一作用域内的渲染函数，避免了渲染上下文代理对象)。
• 更好的 IDE 类型推导性能 (减少了语言服务器从代码中抽取类型的工作)。

2.基本使用

<script setup>

//在<script setup>内的变量和函数相当于setup的全部return出去，并且对于import不需要定义

import { capitalize } from './helpers'  //import的方法也不需要去methods定义
import MyComponent from './MyComponent.vue'  //import的组件也不需要使用components定义
//import { defineProps, defineEmits } from 'vue' 都是只能在 <script setup> 中使用的编译器宏。他们不需要导入，且会随着 <script setup> 的处理过程一同被编译掉

import { ref } from 'vue' 
// 变量
const msg = 'Hello!'
const count = ref(0) 
// 函数
function log() {
  console.log(msg)
}
// 本地的自定义指令在 <script setup> 中不需要显式注册
const vMyDirective = { 
　　 beforeMount: (el) => {
  　　// 在元素上做些操作  
　　} 
}
//<script setup>使用props
const props = defineProps({
  foo: String
})
//<script setup>使用emit定义emit事件名在数组，定义成变量在模板使用
const emit = defineEmits(['submit'])
const sendNum = () => {
　　emit('submit', 1000)
}
//使用 <script setup> 的组件是默认关闭的——即通过模板引用或者 $parent 链获取到的组件的公开实例，不会暴露任何在 <script setup> 中声明的绑定
//当父组件通过模板引用的方式获取到当前组件的实例，获取到的实例会像这样 { a: number, b: number } (ref 会和在普通实例中一样被自动解包)
defineExpose({
  a,
  b 
})
//在 <script setup> 使用 slots 和 attrs 的情况应该是相对来说较为罕见的，因为可以在模板中直接通过 $slots 和 $attrs 来访问它们。在你的确需要使用它们的罕见场景中，可以分别用 useSlots 和 useAttrs 两个辅助函数
//useSlots 和 useAttrs 是真实的运行时函数，它的返回与 setupContext.slots 和 setupContext.attrs 等价。它们同样也能在普通的组合式 API 中使用。
import { useSlots, useAttrs } from 'vue'
const slots = useSlots() 
const attrs = useAttrs()

//里面的代码会被编译成组件 setup() 函数的内容。这意味着与普通的 <script> 只在组件被首次引入的时候执行一次不同
//<script setup> 中的代码会在每次组件实例被创建的时候执行。(setup的内所有的代码都会自动执行）
console.log('hello script setup') 
</script>

//与普通的<script>可以同时使用，
//使用场景

• 声明无法在 <script setup> 中声明的选项，例如 inheritAttrs 或插件的自定义选项。
• 声明模块的具名导出 (named exports)。
• 运行只需要在模块作用域执行一次的副作用，或是创建单例对象。

<script> 
// 普通 <script>, 在模块作用域下执行 (仅一次) 
runSideEffectOnce()  
// 声明额外的选项 
export default {  
　　inheritAttrs: false,  
　　customOptions: {} 
} 
</script>

<template>
　//顶层的绑定会被暴露给模板使用,即能够直接使用<script setup>内import、变量、函数
  <button @click="log">{{ msg }}</button> 
  <button @click="count++">{{ count }}</button> //能够自动解析ref
　<MyComponent />  //直接使用import的组件，不需要components定义， 应当被理解为像是在引用一个变量
  <component :is="Foo" /> //使用动态组件的时候需要绑定is，因为import组件是变量
  <h1 v-my-directive>This is a Heading</h1> //必须遵循 vNameOfDirective 这样的命名规范
  <div>{{ capitalize('hello') }}</div>  //直接使用import的方法
</template>