V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
buynonsense
V2EX  ›  Vue.js

新手学习 Vue3,遇到一些问题

  •  
  •   buynonsense · 275 天前 · 3162 次点击
    这是一个创建于 275 天前的主题,其中的信息可能已经有所发展或是发生改变。

    问大佬们一个问题,为什么 Composition API+HTML 中的 function 需要显式 return ,而Composition API+单文件组件 中的 function 不需要显式 return 而是自动返回呢? (like this ,但是另一个没有 return)

    我这个疑问来自于 vue 官网教程文档 https://cn.vuejs.org/tutorial/#step-8

    23 条回复    2024-03-11 22:57:59 +08:00
    crocoBaby
        1
    crocoBaby  
       275 天前
    没有 setup
    naminokoe
        2
    naminokoe  
       275 天前
    新手学习 vue3 请学习 setup 的语法
    buynonsense
        3
    buynonsense  
    OP
       275 天前
    @crocoBaby html 式的是在 createAPP 写了一个 setup(){} sfc 式的写在<script setup>,这两种有什么区别吗?
    songray
        4
    songray  
       275 天前
    SPA(单文件组件)经过了 Vue 脚手架的编译过程, 不是没有 return, 而是编译后他自动帮你 return 了.
    SPA 编译后的样子可以看我这篇博客的第三段代码:
    https://ray-d-song.com/post/vue-compiler-macro-defineprops
    kumoocat
        5
    kumoocat  
       275 天前
    https://cn.vuejs.org/guide/essentials/reactivity-fundamentals.html#script-setup
    文档里有说:
    单文件组件 <script setup> 中的顶层的导入、声明的变量和函数可在同一组件的模板中直接使用。你可以理解为模板是在同一作用域内声明的一个 JavaScript 函数——它自然可以访问与它一起声明的所有内容。
    songray
        6
    songray  
       275 天前
    @songray 抱歉打错了, sfc
    CHTuring
        7
    CHTuring  
       275 天前
    因为 .vue 单文件里面声明 setup ,这个语法标记的作用仅仅就是帮你少写一点代码,在编译器里面会自动返回。
    crocoBaby
        8
    crocoBaby  
       275 天前
    @buynonsense 框架内置 return
    buynonsense
        9
    buynonsense  
    OP
       275 天前
    @songray #4 谢谢!我询问 gpt ,好像就是.vue 环境的特性,

    而 HTML 模式下是在普通 js 环境。
    buynonsense
        10
    buynonsense  
    OP
       275 天前
    @naminokoe 好的,我再多看看
    tog
        11
    tog  
       275 天前
    其实我个人觉得如果是新手的话,上来就用 setup 应该感觉会很懵逼的。
    曾经有句话,写 vue 是写 vue, 写 react 是写 js.
    个人推荐,vue2 简单模块撸一遍, 然后 vue3 setup 写一套(不是 script 内敛), 然后内敛 setup 学一遍。 这样就知道为什么内敛 setup 简单。 不然会很懵。
    buynonsense
        12
    buynonsense  
    OP
       275 天前
    @tog 哈哈,也没有特别懵逼。我看网上的课/教学,都在教"内敛 setup",而我学校的老师在教 vue2 ,我就在想 vue2 因为去年停止了维护,是否应该直接学习 vue3 ?因为对于初学者来说反正都不懂不如直接学新的
    MRG0
        13
    MRG0  
       275 天前
    ```
    <script>
    ............
    </script srtup>
    ```
    MRG0
        14
    MRG0  
       275 天前
    @MRG0 #13
    <script setup>
    ............
    </script >
    43n5Z6GyW39943pj
        15
    43n5Z6GyW39943pj  
       275 天前
    看上去,你的教程有点落后
    bu9
        16
    bu9  
       275 天前
    小老弟 给你个简单的建议,用不同方式写几个最简单 demo 。 看下 build 后的 js 大概就清楚了。
    buynonsense
        17
    buynonsense  
    OP
       275 天前
    @kumoocat 感谢
    gitlight
        18
    gitlight  
       275 天前
    vue3 的 setup 语法糖,自动返回了所有 function ,没记错的话还会自动注册组件
    yosoroAida
        19
    yosoroAida  
       275 天前
    @tog
    我干全栈( vue3 新手),反而能接受 setup 的语法,接受不了不用 setup 的语法。
    tog
        20
    tog  
       275 天前
    @buynonsense 可以的 直接 vue3 吧。没毛病。
    Imindzzz
        21
    Imindzzz  
       275 天前 via Android
    Vue 好像真的很爱搞这些语法糖
    之前用我印象最深是 defineProps 的 typescript 泛型居然会影响最终编译好的代码
    buynonsense
        22
    buynonsense  
    OP
       275 天前
    @yosoroAida 是的,还是看个人情况
    Lockroach
        23
    Lockroach  
       274 天前
    别学 vue2 了,除非还有公司在维护 v2 的项目,不然直接用 v3
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4733 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 09:34 · PVG 17:34 · LAX 01:34 · JFK 04:34
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.