React、Vue对比

用三种方式，写一个前端页面。页面里有一个按钮，点击后数字逐渐增加。

React

<!DOCTYPE html>
<html>
  <head>
    <title>React Demo</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script
    async
    src="https://ga.jspm.io/npm:es-module-shims@1.7.0/dist/es-module-shims.js"
  ></script>
  <script type="importmap">
    {
      "imports": {
        "react": "https://esm.sh/react?dev",
        "react-dom/client": "https://esm.sh/react-dom/client?dev"
      }
    }
  </script>
  <script type="text/babel" data-type="module">
    import React, { StrictMode } from "react";
    import { createRoot } from "react-dom/client";
    import { useState } from "react";

    function App() {
      const [count, setCount] = useState(0);

      function handleClick() {
        setCount(count + 1);
        console.log("click" + count);
      }
      return <button onClick={handleClick}>Clicked {count} times</button>;
    }

    const root = createRoot(document.getElementById("root"));
    root.render(
      <StrictMode>
        <App />
      </StrictMode>
    );
  </script>
</html>

核心部分

    function App() {
      const [count, setCount] = useState(0);

      function handleClick() {
        setCount(count + 1);
        console.log("click" + count);
      }
      return <button onClick={handleClick}>Clicked {count} times</button>;
    }

我觉得有 3 个特点

异步式的，也就是 useState ，然后 count 只读，用 setCount 去写。我个人认为这样不够灵活方便。
数据和视图分离。
按钮就写在 script 里。

VUE3

<!DOCTYPE html>
<html>
  <head>
    <title>VUE Demo</title>
  </head>
  <body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <div id="app">
      <button @click="handleClick()">Clicked {{num}} times</button>
    </div>
    <script>
      const { createApp } = Vue;

      createApp({
        data() {
          return {
            num: 0,
          };
        },
        methods: {
          handleClick() {
            this.num++;
            console.log("click" + this.num)
          },
        },
      }).mount("#app");
    </script>
  </body>
</html>

核心部分

    <div id="app">
      <button @click="handleClick()">Clicked {{num}} times</button>
    </div>
    <script>
      const { createApp } = Vue;

      createApp({
        data() {
          return {
            num: 0,
          };
        },
        methods: {
          handleClick() {
            this.num++;
            console.log("click" + this.num)
          },
        },
      }).mount("#app");
    </script>

特点

num 和普通变量一样，而且可以直接用于显示。
按钮写在 script 外部。
响应式编程。

React、Vue对比

React

VUE3

推荐阅读更多精彩内容