react vue 对比

模板书写对比

react jsx 写法

  render() {
    return (
      <div>
        <h3>TODO</h3>
        <TodoList items={this.state.items} />
        <form onSubmit={this.handleSubmit}>
          <input onChange={this.handleChange} value={this.state.text} />
          <button>{'Add #' + (this.state.items.length + 1)}</button>
        </form>

vue 写法

<div>
  <h3>TODO</h3>
  <TodoList :items="items"/>
  <form @submit="handleSubmit">
    <input v-model="text"/>
    <button>add # {{items.length+1}}</button>
  </form>
</div>

vue 模板绑定更加简洁,表现在以下几点:

  • :属性名=”xxx”,不用 属性名={xxx},完全的html合法语法
  • @事件名=”handler”,不用onXxx={xxx},完全的html合法语法
  • xxx="xxx" 不用 xxx={this.props.xxx}xxx={this.state.xxx},vue 引用写法更短,不用添加 this,也不用 props.state.
  • 表单录入控件直接使用 v-model 搞定,vue 由于有了 directive,更加方便

direct 带来的方便性

  • v-if, v-else, v-for 比 react 直接集成 js 代码要简洁清晰
  • v-if 的方便性 react 不具备
  • v-show 非常实用
  • @event.xxx 系列非常方便
    • .prevent
    • .key

后面待续。。。

展开阅读全文

没有更多推荐了,返回首页