todolist的五种写法（原生、vue2、vue3、react类组件，react函数组件）

温暖前端

已于 2024-02-21 22:52:19 修改

阅读量1.7k

点赞数 38

文章标签： react.js 前端前端框架 vue.js es6

于 2024-02-09 07:45:00 首次发布

本文链接：https://blog.csdn.net/qq_45914628/article/details/136082109

版权

本文探讨了JavaScript、Vue2、Vue3和React（类组件与函数组件）的特性，并通过实现todolist应用来展示它们的用法。在JavaScript中，重点介绍了弱类型、事件驱动等特点；Vue2和Vue3的对比主要涉及性能、体积和开发体验的提升；React类组件和函数组件则关注生命周期、状态管理和性能表现。每个框架的todolist实现都详述了其核心代码和工作原理。

摘要由CSDN通过智能技术生成

全文链接！！！！！！

1. js、vue2、vue3、react类组件、react函数组件的特性

1.1 JavaScript（JS）特性

弱类型：JavaScript是一种弱类型语言，变量的类型可以在运行时动态改变。
基于原型的面向对象：JavaScript使用原型链来实现面向对象编程。
事件驱动：JavaScript可以通过事件监听和触发来实现交互功能。
动态性：JavaScript具有动态创建、修改和删除元素的能力。
广泛应用：JavaScript不仅可以在网页上运行，还可以在服务器端和移动端等平台上运行。

1.2 Vue2特性

双向数据绑定：Vue2使用数据绑定机制，实现了数据的双向绑定。
组件化开发：Vue2将界面拆分成独立的可复用组件，提高了开发效率和代码的可维护性。
虚拟DOM：Vue2使用虚拟DOM来提高渲染性能，减少真实DOM的操作次数。
生命周期钩子：Vue2提供了一系列的生命周期钩子函数，可以在组件的不同阶段执行相应的操作。
指令系统：Vue2提供了一套指令系统，可以用于操作DOM元素。

1.3 Vue3特性

更好的性能：Vue在虚拟DOM、编译器和响应式系统等方面进行了优化，提高了性能。
更小的体积：Vue3通过优化打包策略和使用Tree-shaking技术，减小了框架的体积。
更好的开发体验：Vue3引入了Composition API，提供了更灵活、可组合的函数式API，使得开发更加简单和直观。
更好的TypeScript支持：Vue3对TypeScript的支持更加友好，提供了更准确的类型推断和类型检查。
更好的可维护性：Vue3通过组合式API和更好的TypeScript支持，提高了代码的可维护性。

1.4 React类组件特性

生命周期方法：React类组件提供了一系列的生命周期方法，可以在组件的不同阶段执行相应的操作。
状态管理：React类组件使用this.state来管理组件的状态，并通过this.setState方法来更新状态。
事件处理：React类组件可以通过this.props来接收父组件传递的属性，并通过事件处理函数来处理用户的交互操作。
渲染方法：React类组件使用render方法来定义组件的渲染逻辑。

1.5 React函数组件特性

简洁易懂：React函数组件相比于React类组件更加简洁和易懂，代码量更少。
无状态：React函数组件是无状态的，不需要管理状态，只需要处理传入的props，并返回一个React元素。
高性能：React函数组件相比于React类组件具有更高的性能，因为函数组件不需要实例化和维护状态。

2. 使用js实现todolist

HTML部分：

<!DOCTYPE html>
<html>
<head>
  <title>Todo List</title>
</head>
<body>
  <h1>Todo List</h1>
  <input type="text" id="taskInput">
  <button onclick="addTask()">Add Task</button>
  <ul id="taskList"></ul>

  <script src="script.js"></script>
</body>
</html>

JavaScript部分：

// 保存任务的数组
var tasks = [];

// 添加任务
function addTask() {
   
  var taskInput = document.getElementById("taskInput");
  var taskList = document.getElementById("taskList");

 // 创建新的任务项
  var taskItem = do