开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第26天，点击查看活动详情
前言
Vue3.2 setup 语法糖 单文件组件的语法糖 <script setup>。
如果你对 Vue3 语法糖有一定了解，配和我另外一篇一起食用更好哦！Vue3 必学技巧 - Vue3 编程流畅技巧自定义 Hooks
阅读本文，默认你已经对 Vue3.0 的 composition API 有一定了解，但困扰于 setup 函数内需要繁琐 return 相关的变量和函数，那 setup 的语法糖 <script setup> 你将收获满满。语法糖 <script setup> 的引入让你写 Vue3 更爽，让 Vue3 更丰满。
本文是在官方文档基础上写的，如果有时间，建议上官方文档上看，本文写得更为语义化和通俗，希望你能喜欢。
<script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。
解决 Vue3.0 中 setup 需要繁琐将声明的变量、函数以及 import 引入的内容通过 return 向外暴露,才能在 <template/> 使用的问题。
setup>在 template 中使用
<script setup> 中无需 return 声明的变量、函数以及 import 引入的内容，即可在 <template/> 使用。
<script setup> 语法糖
<script setup>
//import引入的内容
import { getToday } from './utils'
// 变量
const msg = 'Hello!'
// 函数
function log() {
console.log(msg)
}
</script>
//在template中直接使用声明的变量、函数以及import引入的内容
<template>
<div @click="log">{{ msg }}</div>
<p>{{getToday()}}</p>
</template>
标准组件 <script> 需要写 setup 函数并繁琐 retrun。
<script>
//import引入的内容
import { getToday } from './utils'
export default{
setup(){
// 变量
const msg = 'Hello!'
// 函数
function log() {
console.log(msg)
}
//想在tempate里面使用需要在setup内return暴露出来
return{
msg,
log,
getToday
}
}
}
</script>
<template>
<div @click="log">{{ msg }}</div>
<p>{{getToday()}}</p>
</template>
小结： <script setup> 语法糖里面的代码会被编译成组件 setup() 函数的内容，不需要通过 return 暴露 声明的变量、函数以及 import 引入的内容，即可在 <template/> 使用，并且不需要写 export default{}。
<script setup> 语法糖里面的代码会被编译成组件 setup() 函数的内容。这意味着与普通的 <script> 只在组件被首次引入的时候执行一次不同，<script setup> 中的代码会在每次组件实例被创建的时候执行。
<script>
console.log('script');//多次实例组件,只触发一次
export default {
setup() {
console.log('setupFn');//每次实例化组件都触发和script-setup标签一样
}
}
</script>
script-setup 标签最终都会编译成 setup() 函数的内容，每次实例化组件，就是实例化一次 setup 函数。script 标签里面的 setup 函数也是一样每次实例化组件，就是实例化一次 setup 函数，但是 script 标签 setup 是需要写在 export default{} 内的，外的只是首次引入的时候执行一次。
