一文詳解Vue3中的script setup語法糖

script setup 語法糖

#組合式API：setup()

基本上使用

Vue 3 的Composition API 系列裡，推出了一個全新的 setup 函數，它是一個元件選項，在建立元件之前執行，一旦props 被解析，並作為組合式API 的入口點。 【學習影片分享：vue影片教學、web前端影片】

setup 選項是一個接收 props 和context 的函數，我們參考文件進行討論。此外，我們將 setup 傳回的所有內容都暴露給元件的其餘部分 (計算屬性、方法、生命週期鉤子等等) 以及元件的模板。

<script>
// 这是一个基于 TypeScript 的 Vue 组件
import { defineComponent } from &#39;vue&#39;

export default defineComponent({
  setup(props, context) {
    // 在这里声明数据，或者编写函数并在这里执行它

    return {
      // 需要给 `<template />` 用的数据或函数，在这里 `return` 出去
    }
  },
})

</script>

新的 setup 選項是在元件建立之前, props 被解析之後執行，是組合式 API 的入口。

注意：
在 setup 中你應該避免使用 this，因為它不會找到元件實例。 setup 的呼叫發生在 data property、computed property 或 methods 解析之前，所以它們無法>在 setup  中被取得。

在新增了setup的script標籤中，我們不必宣告和方法，這種寫法會自動將所有頂層變數、函數，均會自動暴露給模板（template ）使用
這裡強調一句「暴露給模板，跟暴露給外部不是一回事」

##TIP：說的只要通俗一點，就是在使用Vue 3 生命週期的情況下，整個元件相關的業務代碼，都可以放在 setup 裡執行。

因為在 

setup 之後，其他的生命週期才會被啟用，我們比較一下Vue2的Vue3生命週期的變化

元件生命週期

關於Vue 生命週期的變化，可以從下表直觀地了解：

Vue 2 生命週期Vue 3 生命週期執行時間說明beforeCreatesetup#元件建立前執行createdsetup#元件建立後執行#beforeMountonBeforeMount#元件掛載到節點上之前執行mountedonMounted元件掛載完成後執行beforeUpdateonBeforeUpdate元件更新前執行updatedonUpdated元件更新完成之後執行beforeDestroyonBeforeUnmount元件卸載之前執行destroyedonUnmounted元件卸載完成後執行errorCapturedonErrorCaptured當擷取一個來自子孫元件的例外時激活鉤子函數#

可以看到 Vue 2 生命周期里的 beforeCreate 和 created ，在 Vue 3 里已被 setup 替代。

script setup 语法糖

它是 Vue3 的一个新语法糖，在 setup 函数中。所有 ES 模块导出都被认为是暴露给上下文的值，并包含在 setup() 返回对象中。相对于之前的写法，使用后，语法也变得更简单。

自动注册属性和方法无需返回，直接使用

1.<script setup></script> 语法糖并不是新增的功能模块，它只是简化了以往的组合API（compositionApi）的必须返回（return）的写法，并且有更好的运行时性能。

2.在 setup 函数中：所有 ES 模块导出都被认为是暴露给上下文的值，并包含在 setup() 返回对象中。相对于之前的写法，使用后，语法也变得更简单。

你不必担心setup语法糖的学习成本，他是组合式API的简化，并没有新增的知识点。你只需要了解一些用法和细微的不同之处，甚至比之前写setup()还要顺手！

使用方式也很简单，只需要在 script 标签加上 setup 关键字即可

<script setup>
</script>

组件核心 API 的使用

组件自动注册

在 script setup 中，引入的组件可以直接使用，无需再通过components进行注册，并且无法指定当前组件的名字，它会自动以文件名为主，也就是不用再写name属性了。

示例：

<template>
	<Child />
</template>

<script setup>
import Child from &#39;@/components/Child.vue&#39;
</script>

定义组件的 props

defineProps ----> [用来接收父组件传来的 props] 代码示列：

通过defineProps指定当前 props 类型，获得上下文的props对象。

示例：

<script setup>
  import { defineProps } from &#39;vue&#39;

  const props = defineProps({
    title: String,
  })
</script>
<!-- 或者 -->
<script setup> 
    import { ref,defineProps } from &#39;vue&#39;;
    
    type Props={ 
        msg:string 
    }
    defineProps<Props>(); 
</script>

定义 emit

defineEmit ----> [子组件向父组件事件传递]

使用defineEmit定义当前组件含有的事件，并通过返回的上下文去执行 emit。

 代码示列：

<script setup>
  import { defineEmits } from &#39;vue&#39;
  const emit = defineEmits([&#39;change&#39;, &#39;delete&#39;])
  
</script>

父子组件通信

defineProps 用来接收父组件传来的 props ; defineEmits 用来声明触发的事件。

//父组件
<template>
	<Child @getChild="getChild" :title="msg" />
</template>

<script setup>
import { ref } from &#39;vue&#39;
import Child from &#39;@/components/Child.vue&#39;
const msg = ref(&#39;parent value&#39;)
const getChild = (e) => {
	// 接收父组件传递过来的数据
	console.log(e); // child value
}
</script>

//子组件
<template>
	<div @click="toEmits">Child Components</div>
</template>

<script setup>
// defineEmits,defineProps无需导入，直接使用
const emits = defineEmits([&#39;getChild&#39;]);
const props = defineProps({
	title: {
		type: String,
		defaule: &#39;defaule title&#39;
	}
});

const toEmits = () => {
	emits(&#39;getChild&#39;, &#39;child value&#39;) // 向父组件传递数据
}

// 获取父组件传递过来的数据
console.log(props.title); // parent value
</script>

子组件通过 defineProps 接收父组件传过来的数据，子组件通过 defineEmits 定义事件发送信息给父组件

useSlots() 和 useAttrs()

获取 slots 和 attrs

注：useContext API 被弃用，取而代之的是更加细分的 api。

可以通过useContext从上下文中获取 slots 和 attrs。不过提案在正式通过后，废除了这个语法，被拆分成了useAttrs和useSlots。

• useAttrs：见名知意，这是用来获取 attrs 数据，但是这和 vue2 不同，里面包含了 class、属性、方法。

<template>
    <component v-bind=&#39;attrs&#39;></component>
</template>
<srcipt setup>
   const attrs = useAttrs();
<script>

• useSlots: 顾名思义，获取插槽数据。

使用示例：

// 旧
<script setup>
  import { useContext } from &#39;vue&#39;

  const { slots, attrs } = useContext()
</script>

// 新
<script setup>
  import { useAttrs, useSlots } from &#39;vue&#39;

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

defineExpose API

defineExpose ----> [组件暴露出自己的属性]

传统的写法，我们可以在父组件中，通过 ref 实例的方式去访问子组件的内容，但在 script setup 中，该方法就不能用了，setup 相当于是一个闭包，除了内部的 template模板，谁都不能访问内部的数据和方法。

<script setup></script> 的组件默认不会对外部暴露任何内部声明的属性。
如果有部分属性要暴露出去，可以使用 defineExpose

注意：目前发现defineExpose暴露出去的属性以及方法都是 unknown 类型，如果有修正类型的方法，欢迎评论区补充。

如果需要对外暴露 setup 中的数据和方法，需要使用 defineExpose API。示例：

//子组件

<template>
	{{msg}}
</template>

<script setup>
import { ref } from &#39;vue&#39;

let msg = ref("Child Components");
let num = ref(123);

// defineExpose无需导入，直接使用
defineExpose({
	msg,
	num
});
</script>

//父组件
<template>
	<Child ref="child" />
</template>

<script setup>
import { ref, onMounted } from &#39;vue&#39;
import Child from &#39;@/components/Child.vue&#39;

let child = ref(null);

onMounted(() => {
	console.log(child.value.msg); // Child Components
	console.log(child.value.num); // 123
})
</script>

定义响应变量、函数、监听、计算属性computed

<script setup > 
import { ref,computed,watchEffect } from &#39;vue&#39;;

const count = ref(0); //不用 return ，直接在 templete 中使用

const addCount=()=>{ //定义函数，使用同上 
    count.value++; 
} 

//创建一个只读的计算属性 ref：
const plusOne = computed(() => count.value + 1)

// 创建一个可写的计算属性 ref
const plusOne = computed({
get: () => count.value + 1, 
set: (val) => { count.value = val - 1 } 
})


//定义监听，使用同上 //...some code else 
watchEffect(()=>console.log(count.value)); 
</script>

watchEffect和watch区别

1、watch是惰性执行，也就是只有监听的值发生变化的时候才会执行，但是watchEffect不同，每次代码加载watchEffect都会执行（忽略watch第三个参数的配置，如果修改配置项也可以实现立即执行）

2、watch需要传递监听的对象，watchEffect不需要

3、watch只能监听响应式数据：ref定义的属性和reactive定义的对象，如果直接监听reactive定义对象中的属性是不允许的，除非使用函数转换一下

4、watchEffect如果监听reactive定义的对象是不起作用的，只能监听对象中的属性。

reactive

返回一个对象的响应式代理。

<script setup>
import { reactive, onUnmounted } from &#39;vue&#39;

const state = reactive({
    counter: 0
})
// 定时器 每秒都会更新数据
const timer = setInterval(() => {
    state.counter++
}, 1000);

onUnmounted(() => {
    clearInterval(timer);
})
</script>
<template>
    <div>{{state.counter}}</div>
</template>

使用ref也能达到我们预期的'counter',并且在模板中,vue进行了处理，我们可以直接使用counter而不用写counter.value.

ref和reactive的关系:

ref是一个{value:'xxxx'}的结构，value是一个reactive对象

ref 暴露变量到模板

曾经的提案中，如果需要暴露变量到模板，需要在变量前加入export声明：

export const count = ref(0)

不过在新版的提案中，无需export声明，编译器会自动寻找模板中使用的变量，只需像下面这样简单的声明，即可在模板中使用该变量

<script setup >
import { ref } from &#39;vue&#39;

const counter = ref(0);//不用 return ，直接在 templete 中使用

const timer = setInterval(() => {
    counter.value++
}, 1000)

onUnmounted(() => {
    clearInterval(timer);
})
</script>
<template>
    <div>{{counter}}</div>
</template>

其他 Hook Api

• useCSSModule：CSS Modules 是一种 CSS 的模块化和组合系统。vue-loader 集成 CSS Modules，可以作为模拟 scoped CSS。允许在单个文件组件的setup中访问CSS模块。此 api 本人用的比较少，不过多做介绍。

• useCssVars: 此 api 暂时资料比较少。介绍v-bind in styles时提到过。

• useTransitionState: 此 api 暂时资料比较少。

• useSSRContext: 此 api 暂时资料比较少。

支持 async await 异步

注意在vue3的源代码中，setup执行完毕，函数 getCurrentInstance 内部的有个值会释放对 currentInstance 的引用，await 语句会导致后续代码进入异步执行的情况。所以上述例子中最后一个 getCurrentInstance() 会返回 null，建议使用变量保存第一个 getCurrentInstance() 返回的引用.

<script setup>
  const post = await fetch(`/api/post/1`).then((r) => r.json())
</script>

<script setup></script> 中可以使用顶层 await。结果代码会被编译成 async setup()：

<script setup>
const post = await fetch(`/api/post/1`).then(r => r.json())
</script>

另外，await 的表达式会自动编译成在 await 之后保留当前组件实例上下文的格式。

注意
async setup() 必须与 Suspense 组合使用，Suspense 目前还是处于实验阶段的特性。我们打算在将来的某个发布版本中开发完成并提供文档 - 如果你现在感兴趣，可以参照 tests 看它是如何工作的。

定义组件其他配置

配置项的缺失，有时候我们需要更改组件选项，在setup中我们目前是无法做到的。我们需要在上方再引入一个 script，在上方写入对应的 export即可，需要单开一个 script。

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

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

在script setup 外使用export default，其内容会被处理后放入原组件声明字段。

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

// 声明额外的选项
  export default {
    name: "MyComponent",
    inheritAttrs: false,
    customOptions: {}
  }
</script>
<script setup>
    import HelloWorld from &#39;../components/HelloWorld.vue&#39;
    // 在 setup() 作用域中执行 (对每个实例皆如此)
    // your code
</script>
<template>
  <div>
    <HelloWorld msg="Vue3 + TypeScript + Vite"/>
  </div>
</template>

注意：Vue 3 SFC 一般会自动从组件的文件名推断出组件的 name。在大多数情况下，不需要明确的 name 声明。唯一需要的情况是当你需要 <keep-alive></keep-alive> 包含或排除或直接检查组件的选项时，你需要这个名字。

(Learning video sharing: web front-end development, Basic programming video)

以上是一文詳解Vue3中的script setup語法糖的詳細內容。更多資訊請關注PHP中文網其他相關文章！