react 与vue开发中常见的不同（持续整理中...）

最新推荐文章于 2025-06-10 11:06:59 发布

KeroroLX

最新推荐文章于 2025-06-10 11:06:59 发布

阅读量432

点赞数

CC 4.0 BY-SA版权

分类专栏： react笔记 vue笔记

本文链接：https://blog.youkuaiyun.com/github_38928905/article/details/99964700

vue笔记同时被 2 个专栏收录

35 篇文章

订阅专栏

react笔记

11 篇文章

订阅专栏

本文深入对比React与Vue在组件生命周期、样式书写、全局组件引入、this指向等方面的差异，揭示两种框架在开发实践中的优劣。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引入图片和背景

react:

import logo from './logo.svg';
...
<img src={logo} className="App-logo" alt="logo" />

vue:

<img :src="logo" className="App-logo" alt="logo" />
<div v-bind:style="{ 'background-image': 'url(' + logo + ')'}">背景</div>
...
import logo from './logo.svg';
...
data: function () {
            return {
              logo:logo,//必要
            }
        },

动态添加className

不同于常规的calss写法，react中要写"className"

react:

 <div className={navFlag=='shopCar'?"activedTheme":''}>添加className</div> 
 <div className={`main clearfix ${noLine?"noBorder":""}`}>添加更多className</div> 
 {/*动态给子组件的class传值*/}
 <i className={iconName+` iconfont ${actived?"activedTheme":""}`}></i>

vue:

 <div class="main clearfix" :class="{'activedTheme':navFlag=='shopCar','actived':navFlag=='menu'}">添加更多class</div>
 <div :class="[classA, classB]">Demo7</div>
 <div :class="[isActive?'activedTheme':'noBorder']"></div>
 //计算属性
 <div :class="classObject"></div>
 ...
   data: function () {
        return {
          classA:'noBorder',
           classB:'activedTheme',
           isActive: true,
        }
    },
    computed: {
    classObject: function (i) {//计算属性传值
			 return function(i) {
          		console.log(i);
          		return {}
       	 },
     coinClassObj:function(i){
        return function(i) {
          var classN='coinClass'+(i+1);
          var obj={
            'coinItem2':i%2==0,
            'coinItem1':i%2!=0,
            'hiddenCoin':i>=5,
          };
          obj[classN]=true;
          return obj
        }
      }
	}

组件生命周期

vue:根实例在main.js中被创建：

var app=new Vue({el:"#app",components:{APP},template:’’})

然后项目中的vue文件，一个vue文件可看做一个组件，这些可嵌套可复用的组件与根实例组成一个vue应用。

实例（组件）钩子：
在这里插入图片描述

 <template>
      <div>
        flag:<input type="text" v-model="flag">
        <div id="box">{{flag}}</div>
      </div>
    </template>

<script>
  export default {
    props: [],
    data: function () {
      return {
        flag:'你好',
      }
    },
    watch:{

    },
    beforeCreate: function () {
      console.log('beforeCreate---------');
      console.log(this.flag);
      console.log($("#box")[0]);
    },
    created: function () {
      console.log('created----------');
      console.log(this.flag);
      console.log($("#box")[0]);
    },
    beforeMount: function () {
      console.log('beforeMount---------');
       console.log(this.flag);
      console.log($("#box")[0]);
    },
    mounted: function () {
      console.log('mounted-----------');
      console.log(this.flag);
      console.log($("#box")[0]);
    },
    beforeUpdate: function () {
      console.log('beforeUpdate--------');
       console.log(this.flag);
      console.log($("#box")[0]);
    },
    updated: function () {
      console.log('updated------------');
      console.log(this.flag);
      console.log($("#box")[0]);
    },
    beforeDestroy: function () {
      console.log('beforeDestroy--------');
      console.log(this.flag);
      console.log($("#box")[0]);
    },
    destroyed: function () {
      console.log('destroyed------------');
      console.log(this.flag);
      console.log($("#box")[0]);
    }
  }
</script>

执行结果：
在这里插入图片描述
当改变data时触发beforeUpdate updated函数，其他的函数都只是调用一次，当需要监听某个data改变时，可使用watch。
react:

现在看一下执行：

import React,{Component} from 'react'
class Home extends Component {
    constructor(props) {//getInitialState()
        super(props);
        this.state = { flag: 'data数据' };
    }
    componentWillMount(){
        console.log('componentWillMount-----------');
        console.log(this.state.flag);
    }
    render() {
        console.log('render-----------');
        console.log(this.state.flag);
        return (
            <div id="box">Home</div>
        )
    }
    componentDidMount(){
        console.log('componentDidMount-----------');
        console.log(this.state.flag);
        console.log(document.getElementById('box'));
    }
    componentWillReceiveProps(){
        console.log('componentWillReceiveProps-----------');
    }
    shouldComponentUpdate(){
        console.log('shouldComponentUpdate-----------');
    }
    componentWillUpdate(){
        console.log('componentWillUpdate-----------');
    }
    componentDidUpdate(){
        console.log('componentDidUpdate-----------');
    }

    componentWillUnmount(){
        console.log('componentWillUnmount-----------');
    }
}

export default Home

在这里插入图片描述
看出组件初始化时，componentDidMount后面的函数不会触发，
当state改变时，如果有shouldComponentUpdate会先触发这个函数，没有则继续下面图的：

切换路由时，离开当前组件：

当改变state时触发componentWillUpdate，render，componentDidUpdate函数，其他的函数都只是调用一次。

this指向

vue中，生命周期钩子及事件函数中的this即当前的vue对象

例 <span @click=‘closeThis’>关闭

closeThis:function(){
      console.log(this)  //VueComponent
}

react要做处理，否则事件中的this为undefined，或者用es6写法

例：< span onClick={this.closeThis}>关闭

closeThis(){
      console.log(this)  //undefined
}

例：< span onClick={this.closeThis.bind(this)}>关闭

closeThis(){
      console.log(this)  // Home [即当前的react对象]
}

es6写法：
< span onClick={this.closeThis}>关闭

handleChange=(event)=>{
    console.log(this);//Home
}

全局组件

场景：需要封装一堆的自定义组件，一次引入，全局使用
vue:
配置：main.js(一次引入)

//elementUI引入
import ElementUI from 'element-ui'
Vue.use(ElementUI);

使用：（任意地方）

<el-form :inline="true"><el-form/>

react使用（某jsx中）：

import BottomNavigation from '@material-ui/core/BottomNavigation';
...
<BottomNavigation ><BottomNavigation />

React不能使用vue的上面的方式，只能使用一次，单独import目标组件；（这个答案不绝对啊，只是现在我这里是这样的，确实找不到方法了，希望有更好的办法的朋友评论告诉一下技巧，谢谢）

组件的命名

react组件的命名必须是大写开头，但是vue不是。

import书写位置

react使用import时要注意，在import前不能出现非import语句，否则报错。

组件内样式的书写

react:

//样式的书写格式应该是键值对的方式，属性名为驼峰
var style={
    banner:{
        fontSize:"32px",
        color:"red"
    }
}
class Home extends Component {
    render() {
        return (
            <div style={style.banner}>324</div>
        )
    }
}

vue

<div class="banner">324</div>
...
<style lang="scss">
  .banner{
     font-size:32px;
     color:red;
  }
<style>

vue渲染html数据,React渲染html数据

vue :< div v-html=“htmlData”></div>
React:< div dangerouslySetInnerHTML={{__html: htmlData}}></div>

动态渲染自定义组件（vue 的component :is 在react中的实现方式）

vue：

<div className="channelModule">
	<component v-for="(item,i) in modules" :is="item.moduleCode" :listData="item" :key="item.id"></component>
</div>
...
 components: {
        'module101':Com_img,
        'module102':Com_nav,
}

react:

drawCom=(name,listData)=>{
        switch (name) {
            case 'module101':
                return <Com_img listData={listData} key={listData.id}/>;
            default:
                break;
        }
    }
...
render() {
        return (
            <div className="channelModule">
                {
                    this.state.modules.map(item=>(
                        this.drawCom(moduleCode,item)
                    ))
                }
            </div>
        )
    }

react多行省略失效

审查样式发现在编译后没有用于设置多行省略的样式-webkit-box-orient: vertical;解决方式：

/* autoprefixer: ignore next */
    -webkit-box-orient: vertical;

在 -webkit-box-orient: vertical 上方加过滤；