vue3＜script setup＞——基础使用

参考官网 https://cn.vuejs.org/api/sfc-script-setup.html

一、什么是 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＞——组件通信