请问vue3 setup语法糖写法的一个问题？

Question

请问 我在<script setup> 这种语法糖下，能使用图2这种写法吗？ 是不是只能用图1的写法？

这两种写法 除了写法不一样，有什么区别吗？是不是一般图1用的比较多

Answer 1

看看这篇文章：Vue3 script setup 语法糖详解
vue文件代码：

<template>
  <div>{{ msg }}</div>
</template>
<script setup>
  const msg = 'Hello!'
</script>

编译后的js代码：

export default {
  setup() {
    const msg = 'Hello!'

    return function render() {
      // has access to everything inside setup() scope
      // 在函数 setup 作用域，函数 render 能访问 setup 的一切，
      return h('div', msg)
    }
  }
}

Vue3.2 setup语法糖总结