script setup 实验性 vue 语法

这是一个简单的计数器例子，模板中使用 count 变量，inc 函数。

<template>
  <button @click="inc">{{count}}</button>
</template>

如果模板上要使用的些变量，必须要在 setup 返回的对象中定义。

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const inc = () => count.value++

    return {
      count,
      inc,
    }
  },
}
</script>

暴露变量必须 return 出来，这样还是比较繁琐，有没有更简单的办法，于是 script setup 语法出现。使用这个语法只需要在 script 标签上加上 setup 属性。

<script setup>
  import { ref } from 'vue'

  export const count = ref(0)
  export const inc = () => count.value++
</script>

当 ​​<script>​​ 标签具有 setup 属性时，组件在编译的过程中代码运行的上下是 setup() 函数中。所有ES模块导出都被认为是暴露给上下文的值，并包含在 setup() 返回对象中。

语法变得越来越简单，比如有外部组件导入到模板中使用时，只要几行代码就搞定了。

<template>
  <Foo/>
  <Bar/>
  <component :is="ok ? Foo : Bar"/>
</template>

script setup 语法

<script setup="props">
export { default as Foo } from './Foo.vue'
export { default as Bar } from './Bar.vue'
export const ok = Math.random()
console.log(props)
</script>

vue3 语法

<script>
import Foo from './Foo.vue'
import Bar from './Bar.vue'
export default {
  setup (props) {
    console.log(props)
    return {
      ok: Math.random(),
      Foo,
      Bar
    }
  }
}
</script>

其实 script setup 就相当于在编译运行是把代码放到了 setup 函数中运行，然后把导出的变量定义到上下文中，并包含在返回的对象中。