react和vue的比较

最新推荐文章于 2025-09-25 11:42:23 发布

原创最新推荐文章于 2025-09-25 11:42:23 发布 · 210 阅读

CC 4.0 BY-SA版权

相同点
1，基本核心文件都是index.html+main.js+组件（react中是app.js，vue中是app.vue)
2，新建一个项目的流程都是：安装cli(npm install )，新建一个工程(vue/creat-react-app init project)，打开本地端口访问网页 localhost:3000（8080）
3，都是模块化，组件堆积式网页，都需要import和export组件
4, react和vue都使用mvvm模式。mvc和mvvm的区别
5，react和vue都是状态机，状态改变则组件自动刷新

//react
this.state={
   deep1:false,
    deep2:false
}

change(){
//因为参数是字符串，不可以使用setState了
this.state[deep] = !this.state[deep];
this.setState({fresh:!this.state.fresh}); //为了刷新状态而写
}

render(){
 <button  onClick={this.change("deep1")}  className={this.state.deep1?"blue":"red"}</button>
}

不同点
1，react中可变数据放置在state状态管理中，使用this.state.name来调用；vue放置在data中，使用v-bind调用。
2，react将html和js混合，以jsx的形式书写组件，而vue在组件内，以html与js分离的方式，将html放置在<template>标签中，js放置在<script>标签中，css放置在<style>标签中。
react组件:

import  a  from './a';
export  class  b  extends  c{
constructor(){
super();
}
this.state={}
render(){   
return(
<div> {this.state.name} </div>
)
}
}

vue组件

<template>
   <div>
      <a    on:click="hello">{{message}}</a>
 </div>
</template>
<script>
     export  default{
     name:  'helloworld‘，
     methods:{
         hello:  function(){}
     },
     data:{
      message:"hello  zej  ",
     },
}
</script>

3， vue中组件循环

<template>
    <div>
        <div v-for="(item,index) in data" :key="index">
           {{item.name}}
        </div>
    </div>
</template>

react中组件循环