Vue3入门-script setup语法糖，极致体验`<script>` 代码块上添加 `setup` attribu

script setup到底带来了什么体验

在最新的Vue3+Vite项目中，会出现script setup这样的配置,这不免让人很疑惑，因为之前都是需要配置一个setup()函数，如果需要给模板使用，都是需要把属性和方法暴露出去的。而且需要配置export default让别人能够引用这个组件。

//未使用setup 属性
<script>
import Child from './components/Child.vue';
import { ref } from 'vue'
export default {
  name: 'App',
  components: {
    Child
  },
  setup() {
    const num = ref(1);
    return {
      num
    }
  }
}
</script>

//使用setup属性 效果和上面一模一样
<script setup>
import Child from './components/Child.vue';
import { ref } from 'vue'
const num = ref(1);
</script>

来自Vue3官方

在 <script> 代码块上添加 setup attribute：里面的代码会被编译成组件 setup() 函数的内容。这意味着与普通的 <script> 只在组件被首次引入的时候执行一次不同，<script setup> 中的代码会在每次组件实例被创建的时候执行 当使用 <script setup> 的时候，任何在 <script setup> 声明的顶层的绑定 (包括变量，函数声明，以及 import 导入的内容) 都能在模板中直接使用

1.导入并自动注册组件

2.将所有顶级变量、函数自动导出

3.不用写export default 自动暴露给外部

script标签内的内容相当于原本组件声明中setup()的函数体

如果想用props watch computed 都需要引入api 实现真正的按需引入

<template>
  <div class="app">
    <span>{{ num }}</span>
    <span>名字:{{ name }}---年龄{{ age }}</span>
    <Child />
  </div>
</template>

<script setup>
import Child from './components/Child.vue';
import { ref, reactive } from 'vue'
const num = ref(1);
const person = reactive({
  name: 'Tina',
  age: 19
})
</script>