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

This topic created in 2092 days ago, the information mentioned may be changed or developed.

一用<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 replies • 2021-02-19 14:09:00 +08:00

Pionxzh

Feb 18, 2021 via Android

vue 和 sfc-compiler 是最新版吗?

zxCoder

Feb 18, 2021

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

workg

Feb 19, 2021

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

SilentDepth

Feb 19, 2021

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

SilentDepth

Feb 19, 2021

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

zxCoder

Feb 19, 2021

@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

Feb 19, 2021

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

workg

Feb 19, 2021

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

zxCoder

Feb 19, 2021

@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

Feb 19, 2021

@workg #8 什么？

SilentDepth

Feb 19, 2021

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

workg

Feb 19, 2021

@zxCoder 不需要 export

zxCoder

Feb 19, 2021

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