了解script setup语法糖

了解<script setup>语法糖

基本语法

<script setup lang="ts">
  console.log('hello script setup');
</script>

里面的代码会被编译成组件 setup() 函数的内容。

传统vue2

<template>
<div>
</div>
</template>

<script>
export default {
name: "index",
mounted() {
 console.log('hello script setup');
},
};
</script>

顶层的绑定会被暴露给模板

<script setup lang="ts">
// 变量
const msg = 'Hello!'

// 函数
function log() {
  console.log(msg)
}
</script>

<template>
  <div @click="log">{{ msg }}</div>
</template>

当使用 <script setup> 的时候，任何在 <script setup> 声明的顶层的绑定 (包括变量，函数声明，以及 import 引入的内容) 都能在模板中直接使用;

例如msg and log() 默认暴露出去，在模版template中可直接使用

传统vue2

<template>
<div>
 <h2 @click="log">{{msg}}</h2>
</div>
</template>

<script>
export default {
name: "index",
data() {
 return {
   msg: 'Hello!'
 };
},
methods: {
 log() {
   console.log(this.msg)
 }
}
};
</script>

<style scoped></style>

使用组件

<script setup lang="ts">
import MyComponent from './MyComponent.vue'
</script>

<template>
  <MyComponent />
</template>

将 MyComponent 看做被一个变量所引用。

传统vue2

<template>
<div>
 <table3></table3>
</div>
</template>

<script>
import table3 from "@/components/table3";
export default {
name: "index",
components: {
 table3
}
};
</script>

<style scoped></style>

defineProps

App.vue(父组件)

<script setup lang="ts">
// 这个启动器模板使用Vue 3
// 请查看https://vuejs.org/api/sfc-script-setup.html script-setup

import HelloWorld from "./components/HelloWorld.vue";
</script>

<template>
  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
</template>

<style>
</style>

HelloWorld.vue(子组件)

<script setup lang="ts">
interface Props {
  msg?: string;
  value?: string;
}

withDefaults(defineProps<Props>(), {
  msg: "hello",
});
</script>

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

<style scoped>
</style>

使用类型声明时的默认 props 值

仅限类型的 defineProps 声明的不足之处在于，它没有可以给 props 提供默认值的方式。为了解决这个问题，提供了 withDefaults 编译器宏

defineEmits

App.vue(父组件)

<script setup lang="ts">
// 这个启动器模板使用Vue 3
// 请查看https://vuejs.org/api/sfc-script-setup.html script-setup

import HelloWorld from "./components/HelloWorld.vue";
  
const Hello = () => {
  console.log("Hello");
};
  
const Hello2 = () => {
  console.log("Hello2");
};
</script>

<template>
  <HelloWorld @change="Hello" @update="Hello2" />
</template>

<style>
</style>

HelloWorld.vue(子组件)

<script setup lang="ts">
const emit = defineEmits<{
  (e: "change", id: number): void;
  (e: "update", value: string): void;
}>();
  
const decrement = () => emit('update', '456');
</script>

<template>
  <button type="button" @click="$emit('change', 123)">btn1</button>

  <button type="button" @click="decrement">btn2</button>
</template>

<style scoped>
</style>

演示了两种调用方式

slot

App.vue(父组件)

<script setup lang="ts">
import HelloWorld from "./components/HelloWorld.vue";
</script>

<template>
  <HelloWorld>
    <h3>实现插槽1</h3>
    <template v-slot:dome>
      <h4>实现插槽2</h4>
    </template>
  </HelloWorld>
</template>

<style>
</style>

使用插槽时，不能使用 slot="XXX",要使用v-slot，不然会报错

HelloWorld.vue(子组件)

<script setup lang="ts">
</script>

<template>
  <slot></slot>
  <slot name="dome"></slot>
</template>

<style scoped>
</style>

顶层 await

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

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

限制：没有 Src 导入

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

其它的感觉暂时用不到，所以暂时不写，更多细节查看 => 🌈 官方文档