Vue和React的小对比

Mon 07 January 2019 / In categories Web

ReactJS, VueJS

VueReact有很多相似的地方,比如两个的目标都是要以组件化的方式来重用前端代码。这就像是两超级英雄,在我们开发前段代码的时候帮我们出工出力。

超级英雄的内裤?

如果要说这两个超级英雄的差别,那么我们可以打这么一个比方:

  • Vue像是那个内裤外穿的超级英雄
  • React像是那个内裤内穿的超级英雄

来看一个最简单的Vue程序:

<div id="app">
  <p> {{ message }} </p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Vue是基于模版的,像那个div标签的内容就是一个模板,里面可以内嵌逻辑{{ message }}

再来看一个简单的React程序

<div id="app"></div>

class Message extends React.Component {
  render() {
    return <p> {{ this.props.message }} </p>
  }
}

ReactDOM.render(<Message massage="Hello React!"/>, document.getElementById("#app"))

在上面的两个例子里面,Vue版本的例子把<p> {{ message }} </p>放在了逻辑代码之外,而React版本的例子把<p> {{ this.props.message }} </p>放到了逻辑代码之内。

模板还是JSX

对于React来说,JSX是一个预处理器,它把类似<p> {{ this.props.message }} </p>这样的代码翻译成JavaScript表达式。虽然JSX支持一定的条件操作,但总体而言功能不强,因为JSX可以依托外部的JavaScript来进行条件操作。

对于Vue来说,<p> {{ message }} </p>是放置在外部的模板中的,而不是放在JavaScript代码中的。所以Vue要把很多逻辑内嵌在模板里面(参考Vue的文档Template Syntax),提供更多的语法糖。Vue的模板不仅是一个预处理器,同时肩负的数据流处理任务更重。在创建Vue实例的时候,可以相当多类型的的属性,比如除了基本的eldatamethods之外,Computed Properties and Watchers里面还描述了两种额外的属性:ComputedWatchers

仔细看Vue的生命周期图Lifecycle Diagram,和React的生命周期图其实很像,不过多了一些模板相关的处理。

从另一个层面,React强迫程序员基于Component来设计代码;而在Vue的世界里,Component是一套机制,可以穿在里面,也可以穿在外面。下面是一个穿在里面的例子:

// Define a new component called button-counter
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

<div id="components-demo">
  <button-counter></button-counter>
</div>

在上面的例子中,<button v-on:click="count++">You clicked me {{ count }} times.</button>被穿在了button-counter里面,于是button-counter变成了一个Component。

总结

总的来说,Vue替程序员做了很多决定,比较带有偏向性(opinionated);而React把很多责任交给程序员。Vue更像是MVVM模型,而React更像是MVC模型。

Load Disqus Comments