一、什么是 script setup
-
<script setup>
是 vue3 的一个语法糖,在同时使用单文件组件 (SFC)
和组合式API
时默认推荐 -
更简洁的代码
- 每个页面都需要写一遍 setup(){ return },实在繁琐, 使用语法糖后,这个结构就被简化了,全部当做 setup 内部去执行
- 顶级绑定都可以被模板直接使用,包括
变量
、函数
、组件
,组件只需要引入不需要注册
-
更好的运行时性能:模板会被编译成
同一作用域
内的渲染函数,避免了渲染上下文代理对象(写的时候也不需要那么多this
了) -
能够使用纯 TypeScript 声明 props 和自定义事件
-
更好的 IDE 类型推导性能
二、基础使用
使用时建议 把 script 写在 template上面
(官方文档的demo都是这样的顺序,瞬间有 jsx 那味儿了)
<script setup>
import { ref } from 'vue'
// 组件:引用后不需要注册
import MyComponent from './MyComponent.vue'
// 变量
const count = ref(0)
const msg = 'Hello!'
// 函数被模板访问不需要this
function log() {
// 函数中访问变量不需要this
console.log(msg)
}
// 生命周期
onMounted(() => {
console.log(count.value)
})
</script>
<template>
<button @click="count++">{{ count }}</button>
<button @click="log">{{ msg }}</button>
<MyComponent />
</template>
三、组件通信
请移步下一篇文章:Vue3<script setup>——组件通信