带你熟练vue3的setup语法糖＜script setup＞

setup语法糖

模板中用到东西无需return

组件的自定义方法、定义的数据(响应式和非响应式)、引入的组件都可以直接在模板（template）中使用直接使用，无需return或者注册。

<script setup lang='ts'>
import Test from "./components/Test.vue"
import {ref} from "vue"

const num=ref(0)
function add(){num.value++}

</script>
<template>
<p>{{num}}</p>
<button @click="add">num++</button>
<Test/>
</template>

<style scoped>

</style>

ref解包

和从 setup() 函数中返回值一样，ref 值在模板中使用的时候会自动解包：

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>

使用自定义指令

全局注册的自定义指令将以符合预期的方式工作，且本地注册的指令可以直接在模板中使用。但有一个需要注意的限制：必须以 vNameOfDirective 的形式来命名本地自定义指令，以使得它们可以直接在模板中使用。

<script setup>
const vMyDirective = {
  beforeMount: (el) => {
    // 在元素上做些操作
  }
}
</script>
<template>
  <h1 v-my-directive>This is a Heading</h1>
</template>
<script setup>
  // 导入的指令同样能够工作，并且能够通过重命名来使其符合命名规范
  import { myDirective as vMyDirective } from './MyDirective.js'
</script>

defineProps 和 defineEmits

在 <script setup> 中必须使用 defineProps 和 defineEmits API 来声明 props 和 emits ，它们具备完整的类型推断并且在 <script setup> 中是直接可用的：

<script setup>
const props=defineProps({
    x:{
        type:String,
        default:'z'
    },
})
const emit = defineEmits(['change', 'delete'])
console.log(props.x)   //使用props
</script>

1.defineProps 和 defineEmits 都是只在 <script setup> 中才能使用。他们不需要导入且会随着 <script setup> 处理过程一同被编译掉。

2.defineProps 接收与 props 选项相同的值，defineEmits 也接收 emits 选项相同的。

defineExpose

获取setup语法糖创建的组件实例时，获取的实例是没有组件自定义的方法和属性的，此时我们需要通过defineExpose来暴露。

<!--组件test-->
<script setup lang='ts'>
import {} from 'vue'

const a=()=>{console.log(1)}
const b=()=>{console.log(2)}

defineExpose({
    a,b
})

</script>

<template>
<p>组件test</p>
</template>


<!--父组件-->
<script setup lang='ts'>
import Test from "./components/Test.vue"
import {ref,onMounted} from "vue"

const testInstanceRef=ref()

onMounted(()=>{
const testInstance=testInstanceRef.value
console.log(testInstance.$el)   // p标签
console.log(testInstance.a)    // a方法，如果不使用defineExpose暴露是拿不到的
})
</script>
<script>
export default{
    components:{
        Test,
    }
}
</script>

<template>
<Test ref="testInstanceRef" />
</template>

useSlots和 useAttrs

在 <script setup> 使用 slots 和 attrs 的情况应该是很罕见的，因为可以在模板中通过 $slots 和 $attrs 来访问它们。在你的确需要使用它们的罕见场景中，可以分别用 useSlots 和 useAttrs 两个辅助函数：

<script setup>
import { useSlots, useAttrs } from 'vue'

const slots = useSlots()
const attrs = useAttrs()
</script>

useSlots 和 useAttrs 是真实的运行时函数，它会返回与 setupContext.slots 和 setupContext.attrs 等价的值，同样也能在普通的组合式 API 中使用。

与普通的 <script> 一起使用

setup script可以和普通的 script 一起使用。普通的 script 在有这些需要的情况下或许会被使用到：

• 无法在 <script setup> 声明的选项，例如 inheritAttrs 或通过插件启用的自定义的选项。
• 声明命名导出。
• 运行副作用或者创建只需要执行一次的对象。

<script>
// 普通 <script>, 在模块范围下执行(只执行一次)
runSideEffectOnce()

// 声明额外的选项
export default {
  inheritAttrs: false,
  customOptions: {}
}
</script>

<script setup>
// 在 setup() 作用域中执行 (对每个实例皆如此)
</script>

在setup script中支持await

结果代码会被编译成async setup() ，async setup() 必须与 Suspense 组合使用，否则会抛出警告。

<!--组件test-->
<script setup lang='ts'>

const  ListReq=()=>new Promise((rel)=>{setTimeout(()=>rel([1,2,3]),1000)})
const res=await ListReq()
</script>
<template>
<p>test组件:{{res}}</p>
</template>


<!--父组件-->
<script setup lang='ts'>
import {Suspense} from 'vue'
import Test from "./components/Test.vue"

</script>

<template>
<Suspense>
<template #default><Test/></template>
<template #fallback><p>loading...</p></template>
</Suspense>
</template>

setup script没有src属性

由于模块执行语义的差异，<script setup> 中的代码依赖单文件组件的上下文。当将其移动到外部的 .js 或者 .ts 文件中的时候，对于开发者和工具来说都会感到混乱。因而 <script setup>不能使用 src attribute 。

composition api的自动导入

需要借助三方插件unplugin-auto-import来完成自动导入功能。什么是自动导入呢，例：当我们要使用onMounted时，我们需要import {onMounted} from 'vue'，但是使用该插件之后就可以省略这一步骤了。

1.安装三方库

yarn add unplugin-auto-import -D

2.在vite.config.ts中编写如下代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from "unplugin-auto-import/vite"

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
  vue(),
  AutoImport({
    imports: ['vue','./src/api'],    // 完成vue模块中的api自动导入，也可追加vuex，vue-router。也可以追加自定义目录
    dts: './auto-imports.d.ts',        // 生成类型声明文件的路径
  })
 ]
})

更多配置访问 unplugin-auto-import

3.在组件中测试自动导入功能

<script setup lang='ts'>
onMounted(()=>{console.log('onMounted')})
</script>

自定义vue3组件代码块

有了组件代码块可以大大提高我们的开发效率，一键生成我们组件的基本结构，省去了很多时间，下面是代码块生成的组件模板。
1.composition api组件的代码块

<script>
import {defineComponent,reactive,toRefs} from 'vue'
import {} from 'vue-router'
import {} from 'vuex'

export default defineComponent({
name:'',
props:{},
emits:[],
setup(props,context){
  const data=reactive({})  //里面写所有的响应式数据，像vue2中的data一样

  return{
    ...toRefs(data),
  }
},
components:{},
})
</script>

<template>

</template>

<style scoped>

</style>

2.setup script组件的代码块

<script setup lang='ts'>
import {} from 'vue'


</script>
<script lang='ts'>
//解决vscode插件报错问题，除此之外组件可能存在使用普通script的情况
export default{
components:{

},
}
</script>

<template>

</template>

<style scoped>

</style>

需要在vscode中自定义代码块，具体操作参考文章在vscode中创建自己的vue3组件代码块。