问大佬们一个问题,为什么 Composition API+HTML
中的 function 需要显式 return ,而Composition API+单文件组件
中的 function 不需要显式 return 而是自动返回呢? (like this ,但是另一个没有 return)
我这个疑问来自于 vue 官网教程文档 https://cn.vuejs.org/tutorial/#step-8
![]() | 1 crocoBaby 2024-03-11 08:53:59 +08:00 没有 setup |
![]() | 2 naminokoe 2024-03-11 08:56:08 +08:00 新手学习 vue3 请学习 setup 的语法 |
3 buynonsense OP @crocoBaby html 式的是在 createAPP 写了一个 setup(){} sfc 式的写在<script setup>,这两种有什么区别吗? |
![]() | 4 songray 2024-03-11 08:57:56 +08:00 SPA(单文件组件)经过了 Vue 脚手架的编译过程, 不是没有 return, 而是编译后他自动帮你 return 了. SPA 编译后的样子可以看我这篇博客的第三段代码: https://ray-d-song.com/post/vue-compiler-macro-defineprops |
5 kumoocat 2024-03-11 08:58:06 +08:00 https://cn.vuejs.org/guide/essentials/reactivity-fundamentals.html#script-setup 文档里有说: 单文件组件 <script setup> 中的顶层的导入、声明的变量和函数可在同一组件的模板中直接使用。你可以理解为模板是在同一作用域内声明的一个 Javascript 函数它自然可以访问与它一起声明的所有内容。 |
![]() | 7 CHTuring 2024-03-11 08:58:49 +08:00 因为 .vue 单文件里面声明 setup ,这个语法标记的作用仅仅就是帮你少写一点代码,在编译器里面会自动返回。 |
![]() | 8 crocoBaby 2024-03-11 09:00:10 +08:00 @buynonsense 框架内置 return |
9 buynonsense OP |
10 buynonsense OP @naminokoe 好的,我再多看看 |
![]() | 11 tog 2024-03-11 09:18:34 +08:00 其实我个人觉得如果是新手的话,上来就用 setup 应该感觉会很懵逼的。 曾经有句话,写 vue 是写 vue, 写 react 是写 js. 个人推荐,vue2 简单模块撸一遍, 然后 vue3 setup 写一套(不是 script 内敛), 然后内敛 setup 学一遍。 这样就知道为什么内敛 setup 简单。 不然会很懵。 |
12 buynonsense OP @tog 哈哈,也没有特别懵逼。我看网上的课/教学,都在教"内敛 setup",而我学校的老师在教 vue2 ,我就在想 vue2 因为去年停止了维护,是否应该直接学习 vue3 ?因为对于初学者来说反正都不懂不如直接学新的 |
![]() | 13 MRG0 2024-03-11 09:24:10 +08:00 ``` <script> ............ </script srtup> ``` |
15 43n5Z6GyW39943pj 2024-03-11 09:26:36 +08:00 看上去,你的教程有点落后 |
16 bu9 2024-03-11 09:29:43 +08:00 小老弟 给你个简单的建议,用不同方式写几个最简单 demo 。 看下 build 后的 js 大概就清楚了。 |
17 buynonsense OP @kumoocat 感谢 |
18 gitlight 2024-03-11 10:04:53 +08:00 vue3 的 setup 语法糖,自动返回了所有 function ,没记错的话还会自动注册组件 |
![]() | 19 yosoroAida 2024-03-11 10:15:24 +08:00 @tog 我干全栈( vue3 新手),反而能接受 setup 的语法,接受不了不用 setup 的语法。 |
![]() | 20 tog 2024-03-11 10:19:36 +08:00 @buynonsense 可以的 直接 vue3 吧。没毛病。 |
![]() | 21 Imindzzz 2024-03-11 10:27:54 +08:00 via Android Vue 好像真的很爱搞这些语法糖 之前用我印象最深是 defineProps 的 typescript 泛型居然会影响最终编译好的代码 |
22 buynonsense OP @yosoroAida 是的,还是看个人情况 |
23 Lockroach 2024-03-11 22:57:59 +08:00 别学 vue2 了,除非还有公司在维护 v2 的项目,不然直接用 v3 |