本文共 4498 字，大约阅读时间需要 14 分钟。

引入图片和背景

react:

import logo from './logo.svg';...

vue:

   
    背景
   
...import logo from './logo.svg';...data: function () {            return {              logo:logo,//必要            }        },

动态添加className

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

react:

   
    添加className
   
  
   
    添加更多className
   
  {/*动态给子组件的class传值*/} 

vue:

   
    添加更多class
   
 
   
    Demo7
   
 
   
 //计算属性 
   
 ...   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应用。

实例（组件）钩子：

执行结果：

当改变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 (            
   
    Home
   
        )    }    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);

使用：（任意地方）

react使用（某jsx中）：

import BottomNavigation from '@material-ui/core/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 (            
   
    324
   
        )    }}

vue

   
    324
   
...

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

vue :< div v-html=“htmlData”></div>

React:< div dangerouslySetInnerHTML={ {__html: htmlData}}></div>

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

vue：

   
	
    
   
... components: {        'module101':Com_img,        'module102':Com_nav,}

react:

drawCom=(name,listData)=>{        switch (name) {            case 'module101':                return 
   
    ;            default:                break;        }    }...render() {        return (            
    
                     {                    this.state.modules.map(item=>(                        this.drawCom(moduleCode,item)                    ))                }            
    
        )    }
   

react多行省略失效

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

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

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

转载地址：http://viurf.baihongyu.com/