Skip to content
On this page

React转Vue心路历程

定义类的方式不同

在react中, 通过className的方式来定义元素的类名
在vue中, 通过class的方式来定义元素的类名

而在相应的scss代码中, 基本没有差别
小区别就是vue的样式写在vue文件中
react需要引入scss文件

编写方式

这里最主要的区别就是

react可以通过类组件的方式或者函数组件的方式来编写
而这样就有涉及this/hooks等的问题

vue就是很模版的方式, 按照规定的写法编写即可

组件化

1.由于react和vue使用的组件库不同, 使用到的组件需要进行一个手动的转换, 即从ant design 转为element

2.在react中, 定义的变量可以是html元素, 而在vue中是不行的。
在使用react时, 可以通过定义变量的方式在一个组件中编写很多个子组件
而vue则需要单独定义一个vue的文件来编写子组件, 引入后使用, 这样的方式会显得很麻烦。
这一点深有感触啊, author页面的转换过程就因为这个问题非常繁琐。这种方式的确是react最大的优势点!

感想

  • react的优势感觉更大, 编写代码的方式更自由, 自由体现在什么方面?

    1. 可以根据组件的功能性选择不同的编写方式。(类组件 / 函数式组件)
    2. 组件的使用更便捷, 抽离并不一定需要新建文件,例如重复使用的组件代码可以进行抽离为单独的组件, 也可以将他定义为一个变量来重复使用, 按需使用不同的方式。
    3. 因为jsx缘故, html可以和js代码编写在一起, 致使代码可以写的非常天马行空, 有好也有坏吧。不同的人编写的风格也不尽相同, 代码可以写的极简, 也可以写的不堪入目, 在多人协作代码维护方面较差。
    4. 因为1.3的缘故, 当设计到对已有数据进行循环的情况, react的优势体现的淋漓尽至。循环的数据可以根据自己的需要, 不同的变量可以直接写出html来渲染, 甚至用方法的方式来执行判断返回。而同类情况在 vue中, 小模块没必要定义组件, 但要实现可能又需要一直的vif velse, 代码看起来反而更复杂难维护了!
  • vue的优势又有哪些?

    1. 相对比较模版化, 最大的好处就是好维护, 比较适合进行团队协作式。
    2. vue提供了内置指令, 同时可以自定义指令, 编写起来也很方便。例如: 取消冒泡时@click.stop 即可 / v-if / v-else / 等等