一、<script setup>语法糖;
1.基本定义;
-
单文件组件(SFC)中使用组合式API使用的语法糖;
-
import导入、响应式数据、变量、函数声明 在模板中可以直接使用;
2.相比普通的 <script> 优势;
-
更少的样板内容,更简洁的代码;
-
能够使用纯 Typescript 声明 props 和 自定义事件;
<script setup>
// 引入组合式api
import { ref } from 'vue';
// 引入组件
import childComponent from './components/child.vue';
// 定义ref数据
let personName = ref('bob');
// 定义函数
function getName() {
console.log('hello world!')
}
</script>
<template>
<div id="app">