從 React 到 Vue 的心得感想 - Huli's blog

[utterances-bot]

從 React 到 Vue 的心得感想 - Huli's blog

如果有看過我的部落格的話，應該會知道我一直都是寫 React，完全沒有碰過 Vue，也沒有碰過 Angular。自從 2015 年接觸到 React 後，工作上就一直是用 React 了。 然而，最近因為工作上的需求，所以開始寫 Vue 了，而剛好也有讀者來問我從 React 跳到 Vue 的心得，因此這邊

https://blog.huli.tw/2024/03/13/from-react-to-vue/

[KejingWang]

是的，作为前端菜鸟还没学明白React，但是最近因为公司业务的原因又得中途学vue，vue真的好学太多了。

[wsx90315]

因為 Vue 使用 SFC, 每個 .vue 通常只定義一個組件 可以裝@vitejs/plugin-vue-jsx，改成 .jsx 並用 defineComponent，這樣就可以在一個檔案內寫多個 component，而且 v-model v-show 一樣可以使用

[uithen]

期待后续Vue使用感受

[Codfisher]

參數使用 kebab-case 這點依照官方的 Style Guide 說法，我的理解是「只有在 HTML template 中請確保使用 kebab-case，SFC 與 JSX 都可以使用 camelCase」

https://vuejs.org/style-guide/rules-strongly-recommended#prop-name-casing

[aszx87410]

@Codfisher 感謝提供來源，這一段的意思我的理解跟你差不多，但我找了一下，當初寫這篇的時候應該是引用另外一段的文件，這一段的偏好就比較強烈了：

https://cn.vuejs.org/guide/components/props#prop-name-casing

虽然理论上你也可以在向子组件传递 props 时使用 camelCase 形式 (使用 DOM 内模板时例外)，但实际上为了和 HTML attribute 对齐，我们通常会将其写为 kebab-case 形式：

对于组件名我们推荐使用 PascalCase，因为这提高了模板的可读性，能帮助我们区分 Vue 组件和原生 HTML 元素。然而对于传递 props 来说，使用 camelCase 并没有太多优势，因此我们推荐更贴近 HTML 的书写风格。

部落格原文的「雖然說我看文件也是可以用 testProps，但官方文件提倡的作法依然是 test-props。」，就是來自於這一段

[Codfisher]

@aszx87410 原來如此，這個段落的說法與 Style Guide 真的差很多

受教了，感謝您

[aszx87410]

@Codfisher 不會~ 看來官方文件自己的說法也不太統一，應該是這個問題可能也沒這麼重要😆

[Codfisher]

@aszx87410 有可能喔 XD，期待大大分享新的心得

大大的文章很受用，感謝分享