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 外部。
  • 响应式编程。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言 自从 2019.2.6 React 16.8 发布以来,新特性 Hooks 彻底颠覆了以往的开发模式,我最早...
    peaktan阅读 1,043评论 2 7
  • 移动App第4天 组件的生命周期 概念:在组件创建、到加载到页面上运行、以及组件被销毁的过程中,总是伴随着各种各样...
    xlystar阅读 334评论 0 0
  • 很多共同之处有:使用虚拟DOM高效的更新视图,提倡组件化数据驱动视图diff算法进行优化router 库实现url...
    怎么昵称阅读 241评论 0 0
  • 个人认为,react和vue的业务逻辑是差不多,vue在react上封装了更简洁的方法,使用起来更加的便捷,如:提...
    祝家庄打烊阅读 52,849评论 5 8
  • vue - 本质是 MVVM 框架,由 MVC 发展而来 React - 本质是前端组件化框架,不是一个完整的MV...
    流曲无觞阅读 399评论 0 0