前言

首先，為什么我需要做這個(gè)項(xiàng)目準(zhǔn)備工作呢？因?yàn)槌Ｄ炅?xí)慣React開發(fā)的我，最近突然接手了一個(gè)Vue項(xiàng)目，而之前基本沒有過Vue的實(shí)踐，這么突兀讓還在沉溺于React開發(fā)的我進(jìn)行Vue開發(fā)，甚是不習(xí)慣，那自然我需要想辦法讓Vue開發(fā)盡量與React相似，這樣大概讓自己在開發(fā)過程中更得心應(yīng)手吧。

組件開發(fā)

特性對(duì)比

眾所周知，Vue和React都有那么一個(gè)特性，那就是可以讓我們進(jìn)行組件化開發(fā)，這樣可以讓代碼得到更好的重用以及解耦，在架構(gòu)定位中這個(gè)應(yīng)該叫縱向分層吧。但是，兩個(gè)框架開發(fā)組件的寫法都有所不同（這個(gè)不同是基于我的開發(fā)習(xí)慣），下面先看一下不同的地方。

首先是React，個(gè)人習(xí)慣于es6的寫法（從來沒用過es5的createClass的寫法）：

import React, { Component } from 'react';import propTypes from 'prop-types';export default class Demo extends Component { state = {  text: 'hello world' }; static propTypes = {  title: PropTypes.String } static defaultProps = {  title: 'React Demo' } setText = e => {  this.setState({   text: '點(diǎn)擊了按鈕'  }) } componentWillReveiveProps(nextProps) {  console.log(`標(biāo)題從 ${this.props.title} 變?yōu)榱?${nextProps.title}`) } render() {  const { title } = this.props;  const { text } = this.state;  return <div>   <h1>{title}</h1>   <span>{text}<span>   <button onClick={this.setText}>按鈕<button>  </div> }}

下面是常見vue的寫法：

<template> <div>  <h1>{{title}}</h1>  <span>{{text}}<span>  <button @click="setText">按鈕</button> </div></template><script>export default { props: {  title: {   type: String,   default: 'Vue Demo'  } }, watch: {  title(newTitle, oldTitle) {   console.log(`標(biāo)題從 ${oldTile} 變?yōu)榱?${newTitle}`)  } }, data() {  return {   text: 'hello world'  } }, methods: {  setText(e) {   this.text = '點(diǎn)擊了按鈕';  } }}</script>

這里的視圖渲染我們先忽略，下一節(jié)在詳細(xì)對(duì)比。

prop對(duì)比：

組件狀態(tài)對(duì)比，Vue為data，React為state：