以下纯属个人使用两个框架的感想和体会:
不知道你们是否有这种感觉~
我vue和react都用过一段时间,但是vue给我感觉就是经常会忘记语法,需要对照文档才知道怎么写( 难不成是我没喝六个核桃的原因吗? ),但是react却很少需要查阅文档( 难不成是我react用的少? )。
可能是因为我vue2用的比较多,在之前的公司~
而vue3更趋向于react了( react: "你在模仿我?", vue撩了一下本就不多的秀发, 脸部红心不跳的说道:"去其糟粕取其精华吗", react一脸黑线 )
1. vue3更好的typescript支持了
2. 搞阶技巧Composition API ,有点React Hooks的味道了, 更好的逻辑复用,更好的类型推导
假如, 我只是说假如: 在vue2 中我需要请求一份数据,并且在loading
和error
时都展示对应的视图:
<template> <div v-if="error">failed to load</div> <div v-else-if="loading">loading...</div> <div v-else>hello {{fullName}}!</div> </template> <script> import { createComponent, computed } from 'vue' export default { data() { // 集中式的data定义 如果有其他逻辑相关的数据就很容易混乱 return { data: { firstName: '', lastName: '' }, loading: false, error: false, }, }, async created() { try { // 管理loading this.loading = true // 取数据 const data = await this.$axios('/api/user') this.data = data } catch (e) { // 管理error this.error = true } finally { // 管理loading this.loading = false } }, computed() { // 没人知道这个fullName和哪一部分的异步请求有关 和哪一部分的data有关 除非仔细阅读 // 在组件大了以后更是如此 fullName() { return this.data.firstName + this.data.lastName } } } </script>
不难看出代码其实不是特别优雅(排除我笨拙的双手), 而且 loading
、error
等处理的可复用性为零, 看起来比较散, 对, 一个字 散, 代码越多,逻辑越复杂 那就越明显了, 而且很不好快速的分辨这个method
是和哪两个data
中的字段关联起来的, 你们有这种感觉吗 (我的错觉?我昨晚喝大了?)
把swr的逻辑照搬到 Vue3 中:
<template> <div v-if="error">failed to load</div> <div v-else-if="loading">loading...</div> <div v-else>hello {{fullName}}!</div> </template> <script> import { createComponent, computed } from 'vue' import useSWR from 'vue-swr' export default createComponent({ setup() { // useSWR帮你管理好了取数、缓存、甚至标签页聚焦重新请求、甚至Suspense... const { data, loading, error } = useSWR('/api/user', fetcher) // 轻松的定义计算属性 const fullName = computed(() => data.firstName + data.lastName) return { data, fullName, loading, error } } }) </script>
这样的话 逻辑更加聚合了, 看起来也比较有凝聚力 , 字段参数比较明了
好了,我也不多说了, 各有各的好处, 能跻身三大主流框架, 没两把刷子 那是不可能的, 你不了解他, 你就别评判他....我还是非常喜欢vue和react的
给新手的温馨提示:
vue2 的方式就是 options API
不过 vue3 也支持这种写法,同时又新增了 composition API
但是不建议大家在 vue3中 混合运用options API和composition API
来都来了, 看都看了, 留下点什么呗~