用html中用vue3 setup怎么用?

我想在html里用vue3的setup写法。
不能直接这样来吗?
<script setup></script>

非得像下面这样吗?

const App = {
        setup() {}
}
阅读 2.8k
3 个回答

是的。建议使用vite来创建

不行。<script setup> 是 Vue3 loader 提供的语法糖,实际运行的是编译后的代码,所以你直接放到 html 里不行。

如楼上所说setup是 Vue3 loader 提供的语法糖,当使用<script setup>的时候,任何在<script setup>声明的顶层的绑定 (包括变量,函数声明,以及 import 引入的内容) 都能在模板中直接使用

<template>
  <button @click="onAddNum">add Num {{ num }}</button>
</template>

<script setup>
import { ref } from "vue";

const num = ref(0);

constonAddNum = () => {
  num.value++;
};
</script>

<script setup>中可以使用顶层await。结果代码会被编译成async setup(),async setup()必须与Suspense组合使用,Suspense目前还是处于实验阶段的特性

<Suspense>
    <template>
        Aaron
    </template>
</Suspense>

<script setup>
const delay = () => {
    return new Promise((res) => {
      setTimeout(() => {
          res();
      },2000);
    })
};
console.log("异步");
await delay();
console.log(`2s后执行`);
</script>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏