React和Vue的区别

1.React和vue安装和目录结构的区别

1. 脚手架不同
2. 启动项目的命令不同
3. 入口文件不同
4. 处理css的方式不同
5. 组件文件的扩展名不同 （React组件 *.js或者 .jsx vue组件 *.vue）

2. React和vue语法的区别

2.1 vue用template来定义模板，而React的模板可以直接写在js代码中，使用了jsx语法

2.2 class属性使用不同

在React中不能给标签添加class属性，要用className来替代，因为js中class是用来定义类的

React

<div className="app">

Vue

<div class="app">

2.3 本地图片的引入不同

react

import pic from './assets/images/01.jpg'
<p><img src={pic} alt="替代文字"/></p>

vue

<img src="./assets/images/01.jpg"/>

2.4 子组件的使用不同

react： 组件标签首字母要大写

<TodoList/>

vue: 组件标签全部用小写

<todo-list/>

2.5 响应式数据的定义和修改不同

react

//定义
this.state = {
   msg: 'hello'
}
//修改
this.setState({
	msg: '新值'
})
// 读取
let val = this.state.msg

vue

//定义
data(){
	return {
	   msg: 'hello'
	}
}
//修改
this.msg = '新值'
//读取
let val = this.msg

2.6 事件绑定不同（类组件）

react

//定义方法
changeAction = （）=>{
	...
}
//绑定事件
<button onClick={this.changeAction}>更改数据 </button>

vue

//定义方法
methods: {
   changeAction(){
      ...
   }
}
//绑定事件
<button @click="changeAction">更改数据</button>

2.7 根元素定义的不同

相同点： 组件中都必须有一个唯一的根元素

不同

react

//用Fragment来替代根元素,不会生成真实dom节点
import React, {Fragment} from 'react'

function ComA(){
	return (
		<Fragment>
		...
		</Fragment>
	)
}
// 用<>和</>来替代根元素

Vue

//用一个真实元素节点包裹
<div>
	...
</div>

2.8 条件渲染的不同

• 第一种

react

<div>
        {/* 用三元条件表达式实现条件渲染 */}
        {
          !this.state.list.length 
          ?
          <div className="loading">正在加载...</div>
          :
          <div className="list">
            <ul>
               {
                 this.state.list.map((item,index)=><li key={index}>{item}</li>)
               }
            </ul>
         </div>
        }
         
      </div>

vue

<div v-if="this.list.length" class="list">列表</div>
<div v-else>loading...</div>

• 第二种 React实现条件渲染的方式

import { Component } from 'react'
import axios from 'axios'
//类组件
class App extends Component {
  // constructor() {
  //   super()
  //   this.state = {
  //     list: []
  //   }
  // }

  // 如果不需要从父组件获取props,则可以简写

  state = {
    list: []
  }
  //初始化请求数据
  componentDidMount() {
    axios.get('http://localhost:8000/list')
      .then(res => {
        this.setState({
          list: res.data
        })
      })
      .catch(err => {
        console.log(err);
      })
  }
  // 用一个方法来封装条件渲染的业务逻辑
  showList = () => {
    let { list } = this.state
    if (list.length) {
      // 有数据
      return (
        <div className="list">
          <ul>
            {
              this.state.list.map((item, index) => <li key={index}>{item}</li>)
            }
          </ul>
        </div>
      )
    }
    // 数组为空
    return <div className="loading">正在加载...</div>
  }
  render() {
    return (
      <div>
        {this.showList()}
      </div>
    )
  }
}
export default App

2.9页面初始化请求数据的生命周期不同

react

//组件挂载完毕 
componentDidMount(){

}

vue

created(){

}
//或者
mounted(){

}

2.10 遍历方式的不同

React

<ul>
{
	this.state.list.map((item, index) => <li key={index}>{item}</li>)
}
</ul>

vue

<div v-for(item,index) in list" :key="index">{item}</div>

2.11 label的for属性不同

react

<label htmlFor="user">用户名</label>
<input type="text" id="user" style={{border:"1px solid #000",background:"#eee"}}></input>

vue

<label for="user">用户名</label>
<input type="text" id="user"/>

2.12 style属性的不同

react: style必须是一个对象

<input type="text" id="user" style={{border:"1px solid #000",background:"#eee"}}></input>

vue

<input type="text" id="user" style="border:1px solid #000;"></input>