How did I transition from React to Vue2?

preface

My previous study or work experience was related to React technology stack. Now I need to use Vue2 technology stack to maintain projects and develop requirements after I come to the new company. It took me about a week to brush the official document of Vue2. Now, in order to enhance my proficiency in using Vue2 and prevent me from quickly remembering how to use it when React is not often used but I have to switch back to it at a certain moment, Thus, this article explains the corresponding relationship between Vue2 and React in basic use.

Again, this article won’t go into too much detail about the principles of the two frameworks (I haven’t read the source 😂), but rather, it will compare and contrast the implementation we need to use in our normal development. In short, my React implementation uses Vue2.

Design concept

A large and complex project has a clear division of responsibilities of the code structure is very important, it has very important meaning for project maintenance, so the React and Vue praise highly modular way to organize our project, like a complete computer, apart from various modules can be independent design, development, mutual coupling, Finally, according to everyone’s unified protocol to design a good interface, the final assembly into a powerful, complete computer.

However, in terms of overall writing, the design concept of the two frames is not quite the same:

JSX

React has only one syntactic sugar, JSX, which incorporates structure and execution logic and presentation into JacaScript, which is why React is more flexible. This all in JS approach has some disadvantages, it will make HTML and JS strong coupling, leading to the confusion of the code in the component, not conducive to maintenance. On the other hand, the development experience makes up for a lot in maintainability by being able to accurately jump to definitions during type hints, automatic checks, and debugging.

Template template

Vue embraces the more traditional and classic idea of separating HTML, CSS, and JS. This means that developers write code separately from structure, execution logic, and presentation, which is a huge improvement in project maintainability. In Vue, however, using the Template template and using the v-if, V-show, V-for syntactic sugar provided to write code was very unfriendly in terms of type hints, defining jumps, and so on, which was another minus for project maintenance.

An example 🌰

Now we have a simple scene that renders a “small” component based on a state that can be toggled with a button click.

React:

import React, { useState } from "react";

function App() {
  const [show, setShow] = useState(true);

  const renderContent = () = > {
    return (
      <div>
        Contents are all here...
        <span>Could be more complex</span>
      </div>
    );
  };

  return (
    <div className="App">
      <h1>Do you want to show the content below?</h1>
      <button onClick={()= >setShow(! show)}>Click</button>
      {show && renderContent()}
    </div>
  );
}

export default App;
Copy the code

We use JSX syntax {show &&… } to determine whether the render logic is executed, and separate the render logic (renderContent) from the renderContent (renderContent). This separation is common in my previous development experience. First, it is for structure reuse, for example, the render structure is also used in other places in the current file. But the “widget” isn’t big enough for me to create a separate JSX file to write as a standalone component; The second is to keep the code in return simple.

However, as the requirements continue to be iterated, the current App component becomes bloated, with a lot of rendering structures like renderContent scattered throughout the component. If you are a person working on the project now, you will find that you will be very tired of matching the render structure in the code to the page structure you have already presented!! I used to maintain a JSX file with thousands of lines of code written in a page, and a lot of rendering logic and execution logic were interspersed throughout the page. I was directly emO at that time.

To use the template template in Vue, we can write:

<template> <div id="app"> <h1>Do you want to show the content below? </h1> <button @click="handleBtnClick">Click</button> <div v-show="show"> Contents are all here... <span>Could be more complex</span> </div> </div> </template> <script> export default { name: "App", data() { return { show: true, }; }, methods: { handleBtnClick() { this.show = ! this.show; ,}}}; </script>Copy the code

As you can see, when writing components using templates, your rendering structure is all in the template, and the page is consistent with the code structure, which is very friendly to the initial developer. In addition, if you want to reuse the rendering logic with v-show in this component, you will be forced to encapsulate it into another component. React doesn’t do this because it’s too liberating, and most of the time most people don’t want to bother.

The downside of using template is that everything written after instructions is written as a string, and the useful function of defining jumps is strangled. It seems to work with TypeScript, but Vue2 and Ts are hard to work with.

Component structure

React uses.jsx files to define components. The general style is a separate file that is strongly coupled with HTML and JS, and uses {} to parse expressions as follows:

// OneComponent.jsx
import React, { useState } from "react";
// import './style.css';

function OneComponent() {
  const [content, setContent] = useState("I am one of useless component.");

  return <div>{content}</div>;
}

export default OneComponent;
Copy the code

Using components:

// App.jsx
import OneComponent from "./OneComponent";

function App() {
  return (
    <div>
      One component below:
      <OneComponent />
    </div>
  );
}
Copy the code

Vue uses a. Vue file to define components. In this file, you write HTML, CSS, JS, and {{}} to parse expressions or values.

// onecomponent.vue // structure (HTML) <template> <div>{{content}}</div> </template> // execute logic (js) <script> export default { name: "OneComponent", data() { return { content: "I am one of useless component.", }; }}; </script> // display (CSS) <style scoped></style>Copy the code

Using components:

// App.vue
<template>
  <div>
    One component below:
    <one-component />
  </div>
</template>

<script>
import OneComponent from "./OneComponent";

export default {
  name: "App",
  components: {
    OneComponent,
  },
};
</script>
Copy the code

Data management

React and Vue are one-way data flows. Data from the parent component flows down to the child component, but not vice versa. The data source of a component generally consists of two parts, one is passed in through props and the other is its own data.

react

React allows static or dynamic prop to be passed down. Static prop usually passes strings directly.

props

The function component gets props as follows:

function Student(props) {
  return <h1>My name is {props.name}</h1>;
}

const element = <Student name="vortesnail" />;
Copy the code

Dynamic prop can also be written here:

<Student name={name} age={1} isMarried={false} isHandsom />
Copy the code

state

React 16.8 Pre-class Component used state to manage data state within components. After 16.8 hooks enabled functional components to manage state as well.

UseState returns a state and a function to update the state. If the new state needs to use the previous state, you can pass a function to setState. The function takes the last state as its first argument, processes it and returns an updated value.

import React, { useState } from "react";

function Counter({ initialCount }) {
  const [count, setCount] = useState(initialCount);

  return (
    <>
      Count: {count}
      <button onClick={()= > setCount(initialCount)}>Reset</button>
      <button onClick={()= > setCount((prevCount) => prevCount - 1)}>-</button>
      <button onClick={()= > setCount((prevCount) => prevCount + 1)}>+</button>
    </>
  );
}
Copy the code

vue

Static and dynamic prop passing is also supported in Vue, but in the case of dynamic passing, the instruction V-bind, abbreviated:, is used.

props

Static prop is generally passed as a string. Obtain props as follows:

<template>
  <h1>My name is {{ name }}, I'm {{ age }} years old.</h1>
</template>

<script>
export default {
  name: "Student",
  props: ["name", "age"],
};
</script>
Copy the code

Passing dynamic prop is different, and requires v-bind:

<student :name="name" :age="1" />
;
Copy the code

You can make type constraints on prop in Vue, such as:

props: { name: String, age: { type: Number, default: 18 } }
Copy the code

But in React you need the prop-types library (with TypeScript you just check at compile time).

data

Data state within components in Vue is managed by Data. When a component is defined, DATA must be declared as a function that returns an initial data object.

<script> export default { name: "OneComponent", data() { return { name: "vortesnail", age: 12, }; }}; </script>Copy the code

The state can be changed directly from the Vue instance:

methods: { changeName() { this.name = 'vortesnail2'; }}Copy the code

Class and style

React differs from Vue in class and style.

react

React uses the className keyword instead of the class attribute in the real DOM.

className

In React, classnames are usually passed string constants or string variables. Arrays or objects are not supported.

import React, { useState } from "react";

function App() {
  const [show, setShow] = useState(true);
  const [active, setActive] = useState(true);

  return (
    <div
      className={`appThe ${show ? "show" :"" ${}active ? "active" :""} `} ></div>
  );
}

export default App;
Copy the code

React uses the JS template string syntax directly. When there are too many styles, use the classnames package to gracefully transfer various states.

classNames("foo"."bar"); // => 'foo bar'
classNames("foo", { bar: true }); // => 'foo bar'
classNames({ "foo-bar": true }); // => 'foo-bar'
classNames({ "foo-bar": false }); / / = > '
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true.bar: true }); // => 'foo bar'

// lots of arguments of various types
classNames("foo", { bar: true.duck: false }, "baz", { quux: true }); // => 'foo bar baz quux'

// other falsy values are just ignored
classNames(null.false."bar".undefined.0.1, { baz: null }, ""); // => 'bar 1'
Copy the code

style

React style receives an object:

const someStyles = {
  color: lightyellow,
  background: lightblue,
  fontSize: "12px"};function App() {
  return <div style={someStyles}>Colorful world!</div>;
}
Copy the code

vue

Unlike React, Vue provides class and style enhancements, allowing you to pass strings, arrays, and objects. In addition, v-bind:class will be merged with class, v-bind:style will be merged with style.

class

Binding string:

<div class="app">hello world! </div>Copy the code

Binding object:

<template> <div class="app" :class="{ show: isShow, active: isActive }"> hello world! </div> </template> <script> export default { name: "App", data() { return { isShow: true, isActive: false, }; }}; </script> <style> .app { background-color: #fff; } .show { display: block; } .active { color: blue; } </style>Copy the code