React and Vue have been used separately for some time now, so as a front-end developer, I’ll take note of the differences between the React and Vue frameworks

1. Vue uses the Template Template and React uses the Jsx format
/ / the Vue Template
<template>
  <ul>
    <li v-for="node in list" :key="node.id">{{node.name}}</li>
  </ul>
</template>

<script setup>
import { ref } from 'vue'
export default {
  setup() {
    let List = [
      { name: 'Joe'.id: 1 },
      { name: 'bill'.id: 2 },
      { name: 'Cathy'.id: 3},]const list = ref(List)
    return {
      list,
    }
  },
}
</script>

Copy the code
//React Jsx code
import React from "react";

export default function Countfunc() {
  let List = [
    { name: "Zhang".id: 1 },
    { name: "Bill".id: 2 },
    { name: "Fifty".id: 3},];const [list] = React.useState(List);
  return (
    <>
      <ul>
        {list.map((node) => {
          return <li key={node.id}>{node.name}</li>;
        })}
      </ul>
    </>
  );
}
Copy the code
2. React requires setState to trigger updates
// The Vue operation data only needs to be changed directly
data(){
    return{
        count:0}},method: {addCount(){
        this.count+=1}}// Increment the count in the page by 1 by using the addCount method
Copy the code
React calls the setState method to trigger data updates
state = { count: 0 };
handleAdd = () = > {
  const { count } = this.state;
  this.setState({
    count: count + 1}); };Copy the code
3. Computed and WACTH syntax sugar are introduced in Vue, and users need to manually implement similar functions in React
React itself does very little, and most things are left to the community.React itself only has React and react-CLI. The author of Vue provides a large number of apis for users to use