前端框架大比拼：2022年的Vue与React谁更胜一筹？

npm install -g @vue/cli
复制代码

vue --version
复制代码

vue create project
cd project
npm run serve
复制代码

npm install -g create-react-app
复制代码

npx create-react-app project
cd project
npm run start
复制代码

<template>
  <Modal :isOpen="open" title="创建项目" />
</template>
复制代码

function Modal({ isOpen, title }) {
  return (
    {isOpen &&
     <form>
        <p>{ title }</p>
      </form>
  );
}
复制代码

1. <Modal isOpen={open} title="创建项目" />
2. 复制代码

function Modal({ isOpen, title }) {
  return (
    {isOpen &&
     <form>
        <p>{ title }</p>
      </form>
  );
}
复制代码

<template>
    <button @click="displayName"> Show Name </button>
<template>
<script setup>
    function displayName() {
      // TODO
    }
</script>
复制代码

function NameAlert() {
    const displayName = () => {
      // TODO
    }
    return (
        <button onClick="displayName"> Show Name </button>
    );
}
复制代码

<template>
  <div>
    <p>{{ firstname }}</p>
    <p>{{ lastname }}</p>
  </div>
</template>
<script setup>
  import { ref, reactive } from 'vue';
  const firstname = ref('张');
  console.log(firstname.value);
  const lastname = reactive('三');
  console.log(lastname);
</script>
复制代码

import { watch, watchEffect } from 'vue';
watch(firstname, () => alert('firstname 改变了！');
watchEffect(lastname, () => alert('lastname 改变了！');
复制代码

import { useState } from 'react';
function ShowName() {
  const [firstName, setFirstName] = useState('张');
  const [lastName, setLastName] = useState('三');
  console.log(firstName, lastName);
  return (
    <div>
      <p>{ firstname }</p>
      <p>{ lastname }</p>
    </div>
  )
}
复制代码

import { useEffect } from 'React';
useEffect(() => {
  console.log('名字改变了!');
}, [firstName, lastName]);
复制代码

<template>
  <div>
    <input type="text" ref="name" />
    <button @click="handleBtnClick"> 开始输入 </button>
  </div>
</template>
<script setup>
  import { ref } from 'vue';
  const name = ref(null);
  handleBtnClick(() => {
    name.value.focus();
  }
</script>
复制代码

import { useRef } from 'react';
function MyName() {
  const name = useRef(null);
  handleBtnClick(() => {
    name.current.focus();
  });
  return (
    <input type="text" ref="name" />
    <button onClick={handleBtnClick}> 开始输入 </button>
  )
}
复制代码

<template>
  <input v-model="searchQuery" />
</template>
<script setup>
import { ref } from 'vue';
const searchQuery = ref('');
</script>
复制代码

import { useState } from 'react';
function MyComponent() {
  [searchQuery, setSearchQuery] = useState('');
  const handleChange = (event) => {
     setSearchQuery(event.target.value);
  }
  return (
    <input value={searchQuery} onChange={handleChange}/>
  );
}
复制代码

<template>
  <div>
    <p v-if="isLoggedIn"> 欢迎 </p>
    <p v-else> 请登录 </p>
    <button v-show="!isLoggedIn">登陆</button>
  </div>
</template>
复制代码

function MyComponent() {
  return (
    {isLoggedIn ? 
     <p>欢迎</p> :
     <p> 请登录 </p>
    }
    {!isLoggedIn && <button> 登陆 </button>}
  );
}
复制代码

<template>
  <div>
    <h1>Welcome</h1>
    <slot><slot>
  </div>
</template>
复制代码

<template>
  <div>
    <h1>欢迎来到我的网站</h1>
    <Modal>
        <input type="text" />
        <button>登陆</button>
    </Modal>
  </div>
</template>
复制代码

function Modal( {children} ) {
  return (
    <div>
       <h1>Welcome</h1>
       { children }
    </div>
  );
}
复制代码

function UserPage() {
  return (
     <div>
     <h1>欢迎来到我的网站</h1>
      <Modal>
        <input type="text" />
        <button>登陆</button>
      </Modal>
    </div>
  );
}
复制代码