vue 和 react語法對比異同點

vue 和 react 學習 異同點

本文不作兩個框架比較，只對比了兩個框架的語法對比，不表明任何觀點，盜版必究，本人惟一qq：421217189 歡迎你們一塊兒來學習探討，壯我大前端（本文markdown直接生成，沒有排版，也是爲了防止那些不要臉的直接複製我文章的人，在此特聲明，全部直接竊取文化知識的人，本人必將追究法律責任，本人qq：421217189，新增一個qq專爲你們提供技術：15274527。）

先說一下兩個框架的中文文檔

Vue

react

能夠點擊直接前往

安裝

vue

$ vue init webpack my-project $ cd my-project $ npm install $ npm run dev

react

$ create-react-app my-app $ cd my-app/ $ npm start

---

修改端口

vue

/config/index.js/

react

/package.json

hellow world 展現實例生成

vue

import Vue from 'vue' new Vue({ el: '#app', template:` <h1> hello world </h1> ` })

react

import React from 'react' import ReactDOM from 'react-dom' ReactDOM.render( <h1>hello world</h1>, document.getElementById('root') )

---

dev 運行方式

vue

• npm run dev

react

• npm start

---

變量的使用

vue

import Vue from 'vue' new Vue({ el: '#app', data(){ return { msg: 'hello world', } }, template:` <h1> {{ msg }} </h1> ` })

react

import React from "react"; import ReactDOM from "react-dom"; class State extends React.Component{ constructor(){ super(); this.state={ msg:'this is react' } } render(){ return( <div>{this.state.msg}</div> ) } } ReactDOM.render( <State/>, document.getElementById('root') )

---

組件props的使用

vue

main.js

import Vue from 'vue' import app from './components/app.vue' new Vue({ el: '#app', components:{ app, }, template:'<app zhangsan="zhangsan"/>' })

app.vue

<template> <h1>{{zhangsan}}</h1> </template> <script> export default { props:[ 'zhangsan' ], data(){ return { msg:'hello world' } } } </script> <style> </style>

react

index.js

import React from "react"; import ReactDOM from "react-dom"; import Dome from "./reactDome.js" ReactDOM.render( <Dome msg = "this is react"/>, document.getElementById('root') )

reactDome.js

import React from "react"; class State extends React.Component { constructor(props) { super(props); } render() { return ( <div>{this.props.msg}</div> ) } } export default State;

---

組件props默認值、驗證

react

import React from "react"; import ReactDOM from "react-dom"; class State extends React.Component { static defaultProps = { msg: 'I am react defaultProps' } constructor(props) { super(props); } render() { return ( <div>{this.props.msg}</div> ) } } ReactDOM.render( <State/>, document.getElementById('root') )

vue

app.vue

<template> <div>{{ msg }}</div> </template> <script> export default { props: { msg: { type: Number, default: 0, } } } </script>

main.js

import Vue from 'vue' Vue.config.productionTip = false import App from '../src/components/app.vue' /* eslint-disable no-new */ new Vue({ el: '#app', template: '<App msg="dsadsda"/>', components: { App } })

---

class和style的賦值

react

import React from "react"; import ReactDOM from "react-dom"; require('./App.css') class From extends React.Component{ constructor(){ super(); this.state = { className : 'mystyle' } } render() { let style = { color:'#333', fontSize:50, } return( <div> <p class={this.state.className}>11111</p> <p style={style}>2222</p> </div> ) } } ReactDOM.render( <From></From>, document.getElementById('root') );

vue

<template> <div> <p :class="className"> class動態 </p> <p :style = "mystyle"> style動態 </p> </div> </template> <script> export default { data(){ return { className : 'mystyle', mystyle : { color:'#333', fontSize:'50px', } } } } </script> <style> .mystyle{ color:#f00; } </style>

• 在這裏有一點要記住，react能夠自動增長px尾綴，vue不會

---

事件

react

import React from "react"; import ReactDOM from "react-dom"; class App extends React.Component { constructor(){ super(); this.clickfunc = this.clickfunc.bind(this); this.state = { tar : true, } } clickfunc(){ this.setState({ tar:!this.state.tar }) } render() { return ( <div onClick={this.clickfunc}>{this.state.tar?'點我':'再點我'}</div> ) } } ReactDOM.render( <App></App>, document.getElementById('root') )

vue

<template> <button @click="clickfunc">{{ msg }}</button> </template> <script> export default { data(){ return { msg : '點我', tar : true, } }, methods:{ clickfunc(){ this.msg = this.tar?'在點我':'點我'; this.tar = !this.tar; } } } </script>

---

表單雙向綁定

react

import React from "react"; import ReactDOM from "react-dom"; class Module extends React.Component { constructor(){ super(); this.state = { value:'react is good', }; this.changeFrom = this.changeFrom.bind(this); } changeFrom(event){ this.setState({ value : event.target.value }) } render(){ return ( <div> <input value = {this.state.value} onChange = {this.changeFrom}/> <p>{this.state.value}</p> </div> ) } } ReactDOM.render( <Module></Module>, document.getElementById('root') );

vue

<template> <div> <input v-model="value"/> <p>{{ value }}</p> </div> </template> <script> export default { data(){ return { value:"vue is good" } } } </script> <style> </style>

---

條件渲染模版

react

import React from "react"; import ReactDOM from "react-dom"; class Module1 extends React.Component{ render(){ return ( <div>我是模版1</div> ) } } class Module2 extends React.Component { render() { return ( <h1>我是模版2</h1> ) } } class Module extends React.Component{ constructor(){ super(); this.state = { tar : true } this.changeModule = this.changeModule.bind(this); } componentWillUpdate(){ console.log(this.state.tar) } changeModule(){ this.setState(s => ({ tar : !s.tar })) // console.log(this.state.tar); } render(){ if(this.state.tar){ return ( <div> <button onClick={this.changeModule}>切換模版</button> <Module1/> </div> ) }else{ return ( <div> <button onClick={this.changeModule}>切換模版</button> <Module2 /> </div> ) } } } ReactDOM.render( <Module/>, document.getElementById('root') )

vue

App.vue

<template> <div> <div v-if="show"> 我是模版一 </div> <div v-if="!show"> 我是模版二 </div> <button @click="changeModule">模版切換</button> </div> </template> <script> export default { data(){ return { show:false } }, methods:{ changeModule(){ this.show = !this.show } } } </script> <style> </style>

mainjs

import Vue from 'vue' Vue.config.productionTip = false import App from './App.vue' /* eslint-disable no-new */ let cpt=new Vue({ el: '#app', template: '<App/>', components: { App }, })

---

列表渲染

react

這裏寫了一個點擊按鈕增長一個的方法，也不知道當時怎麼想的 反正就是寫了不須要的小夥伴刪了就好

import React from "react"; import ReactDOM from "react-dom"; class Module extends React.Component { constructor(props) { super(props); } render() { var listtpl = this.props.listarr.map((todo, index) => <li key={index}>{todo}</li> ) return ( <ul>{listtpl}</ul> ) } } class AddModule extends React.Component{ constructor(){ super(); this.state={ listarr: [1, 2, 3, 4, 6, 7], } this.add=this.add.bind(this); } add(){ this.setState(s =>({ listarr: s.listarr.concat([this.state.listarr.length+2]) })) console.log(this.state.listarr) } render(){ return ( <div> <Module listarr={this.state.listarr}/> <button onClick = {this.add} >添加</button> </div> ) } } ReactDOM.render( <AddModule/>, document.getElementById('root') )

vue

<template> <ul> <li v-for="(i,k) in arr">{{k+' => '+i}}</li> </ul> </template> <script> export default { data(){ return { arr:[1,2,3,5,6,7] } } } </script>

---

組件聲明周期函數

react

import React from "react"; import ReactDOM from "react-dom"; import { setInterval } from "timers"; class State extends React.Component { static defaultProps = { msg: 'I am react defaultProps' }; //項目一開始調用 constructor(props) { super(props); this.state = { msg:11, msg2: props.msg } this.func = this.func.bind('this') } func(){ console.log(1); } //在初始化渲染執行以前馬上調用 componentWillMount(){ console.log('組件將要掛載'); //在這裏使用setstate會讓實例使用這個state this.setState({ msg: 'react componentWillMount' }); } //在初始化渲染執行以後馬上調用一次， componentDidMount(){ console.log('組件已經掛載完成'); } //組件更新時候調用 componentWillReceiveProps(){ console.log('組件props更改了'); this.setState({ msg2 : this.props.msg }) } shouldComponentUpdate(){ console.log('組件props更改了，即將渲染了') //須要提供返回值爲true或者false false就不渲染了 return true; // return false; } //在shouldComponentUpdate以後 componentWillUpdate(){ console.log('如今有一個props或者state更新了') } componentDidUpdate(){ console.log('props更新完畢了') } componentWillUnmount(){ console.log('組件從dom移除了'); } render() { return ( <div>{this.state.msg +'+++++++' +this.state.msg2}</div> ) } } class App extends React.Component{ constructor(){ super(); this.state = { msg:'hellow', }; this.handleChange = this.handleChange.bind(this); } handleChange(event) { this.setState({ msg: event.target.value }); } render(){ return ( <div> <input type="text" value={this.state.msg} onChange={this.handleChange} /> <State msg = {this.state.msg}/> </div> ) } } ReactDOM.render( <App/>, document.getElementById('root') )

vue

<template> <div> <p>Data內容{{ msg }}</p> <input type="text" v-model.lazy="msg"> </div> </template> <script> export default { data(){ return { msg:1, } }, beforeCreate(){ console.log('組件實例話'); }, beforeMount(){ console.log('在掛載完成以後被調用'); }, created(){ console.log('組件掛載完成以後被調用，可是比beforeMount更早一點'); }, mounted(){ this.$nextTick(function () { console.log('推薦在nextTick裏面走函數，防止子組件沒掛載完成'); }) console.log(this.$el); }, beforeUpdate(){ console.log('數據更新開始了,'+this.msg); }, updated(){ console.log('數據更新完成了') }, beforeDestroy(){ console.log('實例銷燬以前以前調用') }, beforeDestroy(){ console.log('Vue 實例銷燬後調用') } } </script> <style> </style>