vue与react哪种好?

杭州前端工程师

发布于 2019-03-12 15:09:35

8680

发布于 2019-03-12 15:09:35

文章被收录于专栏：前端大白专栏

vue与react,到目前为止两个我都用来写了好多项目,vue用的脚手架是vue-cli,react用的是dva,两者都对其进行了很好的封装,只需要简单的几步就能跑起来.

之前在国外一大神讨论这两者之间的区域,说vue是框架,react是库,刚开始真的不已为然,觉得两者应该都是框架,现在想来,还是自己太年轻了,vue是更偏向框架,而react更偏向库,vue封这众多的方法,包括v-if,v-for,v-show,过滤器,指令等等,对于从react转向vue的我来说,确实有很多不方便了,react写习惯了,习惯了自己手动来写这些东西,转到vue后,本以为能用类似的方式来实现,结果纯属浪费时间.

举个例子:

在vue中,用的最多的UI组件是element,react中,国内用的多的是antd.这两个中有一个table组件,在vue中,由于没有render的api,当你从后端获取数据后,需要展示到页面上的内容又不是后端给过来的,需要经过一层转换,你就不得不这样写:

<el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      sortable
      width="180"
      :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
      :filter-method="filterHandler"
    >
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      :formatter="formatter">
    </el-table-column>
    <el-table-column
      prop="tag"
      label="标签"
      width="100"
      :filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"
      :filter-method="filterTag"
      filter-placement="bottom-end">
      <template slot-scope="scope">
        <el-tag
          :type="scope.row.tag === '家' ? 'primary' : 'success'"
          disable-transitions>{{scope.row.tag}}</el-tag>
      </template>
    </el-table-column>
  </el-table>

不得不在最后一行加上template 这样的关键字,这样造成的影响便是,你无法使用组件精减代码,你必须定义各种 <el-table-column>;这让我是非常难受的.

在react中,当你使用antd作为UI组件的时候,你便可以用column这个api里的render函数来定义相应的样式等等.

个人更喜欢用react.

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018/09/04 ，如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js