vue3 官网提到的 “单文件组件组合式 API 语法糖 (<script setup>) 实验性” 是还不能用吗

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1716 天前的主题，其中的信息可能已经有所发展或是发生改变。

一用<script setup></script>就报错

 ERROR  Failed to compile with 1 error                                                                                                      9:00:02 PM

 error  in ./src/components/Add.vue?vue&type=script&setup=true&lang=js

Syntax Error: TypeError: Cannot read property 'content' of null

13 条回复 • 2021-02-19 14:09:00 +08:00

Pionxzh

2021-02-18 21:22:20 +08:00 via Android

vue 和 sfc-compiler 是最新版吗?

zxCoder

2021-02-18 21:41:39 +08:00

@Pionxzh 是的不知道还需要配置什么吗

workg

2021-02-19 09:35:50 +08:00

"vue": "^3.0.5","@vue/compiler-sfc": "^3.0.5", 可以使用。
这个 API 是实验性，后面可能大改甚至废除，使用需考虑清楚。
个人觉的变动可能性不大，因为社区反馈良好。

SilentDepth

2021-02-19 09:53:19 +08:00

我这里实测没有问题。再检查一下你的依赖版本吧。

SilentDepth

2021-02-19 09:58:42 +08:00

@workg #3 script setup 是不错，但没法用对象展开控制 export 的内容，不然就得用 ref （而不是 reactive ）声明响应式状态。但 ref.value 太麻烦，想省事就得上 ref sugar，而 ref sugar 还不好用🤷‍♂️

zxCoder

2021-02-19 11:17:52 +08:00

@workg
@SilentDepth

我用的最新版的 vue-cli 创建项目，初始里面的 vue 和 compier-sfc 是^3.0.4，然后我本地有全局安装的 3.0.5 版本。

然后就算把 package.json 里改成^3.0.5 也不行。

是 vue-cli 的问题吗 vue-cli 是 5.0.0 alpha4

workg

2021-02-19 11:24:42 +08:00

@zxCoder vue-cli 是支持的。可能是你代码语法问题，可以贴下代码

workg

2021-02-19 11:31:50 +08:00

@SilentDepth 新的语法已经需要了 `https://github.com/vuejs/rfcs/pull/227`

zxCoder

2021-02-19 12:06:29 +08:00

@workg

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

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

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

我是直接用这个替换了初始化的那个 HelloWorld.vue

SilentDepth

2021-02-19 13:54:48 +08:00

@workg #8 什么？

SilentDepth

2021-02-19 13:55:48 +08:00

@zxCoder #9 不用 export，直接 const 就行了

workg

2021-02-19 13:56:58 +08:00

@zxCoder 不需要 export

zxCoder

2021-02-19 14:09:00 +08:00

@SilentDepth
@workg
谢谢没想到是这个问题。。。这代码还是我从 github 上复制的