详解从react转职到vue开发的项目准备

前言

首先，为什么我需要做这个项目准备工作呢？因为常年习惯React开发的我，最近突然接手了一个Vue项目，而之前基本没有过Vue的实践，这么突兀让还在沉溺于React开发的我进行Vue开发，甚是不习惯，那自然我需要想办法让Vue开发尽量与React相似，这样大概让自己在开发过程中更得心应手吧。

组件开发

特性对比

众所周知，Vue和React都有那么一个特性，那就是可以让我们进行组件化开发，这样可以让代码得到更好的重用以及解耦，在架构定位中这个应该叫纵向分层吧。但是，两个框架开发组件的写法都有所不同（这个不同是基于我的开发习惯），下面先看一下不同的地方。

首先是React，个人习惯于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: '点击了按钮'  }) } componentWillReveiveProps(nextProps) {  console.log(`标题从 ${this.props.title} 变为了 ${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(`标题从 ${oldTile} 变为了 ${newTitle}`)  } }, data() {  return {   text: 'hello world'  } }, methods: {  setText(e) {   this.text = '点击了按钮';  } }}</script>

这里的视图渲染我们先忽略，下一节在详细对比。

prop对比：

组件状态对比，Vue为data，React为state：