V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
zxCoder
V2EX  ›  问与答

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

  •  
  •   zxCoder · 2021-02-18 21:08:19 +08:00 · 2295 次点击
    这是一个创建于 1134 天前的主题,其中的信息可能已经有所发展或是发生改变。

    一用<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
        1
    Pionxzh  
       2021-02-18 21:22:20 +08:00 via Android
    vue 和 sfc-compiler 是最新版吗?
    zxCoder
        2
    zxCoder  
    OP
       2021-02-18 21:41:39 +08:00
    @Pionxzh 是的 不知道还需要配置什么吗
    workg
        3
    workg  
       2021-02-19 09:35:50 +08:00
    "vue": "^3.0.5","@vue/compiler-sfc": "^3.0.5", 可以使用。
    这个 API 是实验性,后面可能大改甚至废除,使用需考虑清楚。
    个人觉的变动可能性不大,因为社区反馈良好。
    SilentDepth
        4
    SilentDepth  
       2021-02-19 09:53:19 +08:00
    我这里实测没有问题。再检查一下你的依赖版本吧。
    SilentDepth
        5
    SilentDepth  
       2021-02-19 09:58:42 +08:00   ❤️ 1
    @workg #3 script setup 是不错,但没法用对象展开控制 export 的内容,不然就得用 ref (而不是 reactive )声明响应式状态。但 ref.value 太麻烦,想省事就得上 ref sugar,而 ref sugar 还不好用🤷‍♂️
    zxCoder
        6
    zxCoder  
    OP
       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
        7
    workg  
       2021-02-19 11:24:42 +08:00
    @zxCoder vue-cli 是支持的。可能是你代码语法问题,可以贴下代码
    workg
        8
    workg  
       2021-02-19 11:31:50 +08:00
    zxCoder
        9
    zxCoder  
    OP
       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
        10
    SilentDepth  
       2021-02-19 13:54:48 +08:00
    @workg #8 什么?
    SilentDepth
        11
    SilentDepth  
       2021-02-19 13:55:48 +08:00
    @zxCoder #9 不用 export,直接 const 就行了
    workg
        12
    workg  
       2021-02-19 13:56:58 +08:00
    @zxCoder 不需要 export
    zxCoder
        13
    zxCoder  
    OP
       2021-02-19 14:09:00 +08:00
    @SilentDepth
    @workg
    谢谢 没想到是这个问题。。。这代码还是我从 github 上复制的
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1435 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 17:25 · PVG 01:25 · LAX 10:25 · JFK 13:25
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.