框架集成：01 HTML与前端框架概述 - 详细教程与实战指南

<!-- 原生方式：代码组织混乱 -->
<div id="app">
  <input type="text" id="todoInput" />
  <button onclick="addTodo()">添加</button>
  <ul id="todoList"></ul>
</div>

<script>
  var todos = [];
  function addTodo() {
    var input = document.getElementById('todoInput');
    var text = input.value.trim();
    if (text) {
      todos.push({ text: text, done: false });
      input.value = '';
      renderTodos();
    }
  }
  function renderTodos() {
    var list = document.getElementById('todoList');
    list.innerHTML = '';
    todos.forEach(function(todo, index) {
      var li = document.createElement('li');
      li.textContent = todo.text;
      li.style.textDecoration = todo.done ? 'line-through' : 'none';
      li.onclick = function() {
        todos[index].done = !todos[index].done;
        renderTodos();
      };
      list.appendChild(li);
    });
  }
</script>

<!-- Vue方式：代码组织清晰 -->
<div id="app">
  <input v-model="newTodo" @keyup.enter="addTodo" />
  <button @click="addTodo">添加</button>
  <ul>
    <li v-for="(todo, index) in todos"
        :key="index"
        :style="{ textDecoration: todo.done ? 'line-through' : 'none' }"
        @click="todo.done = !todo.done">
      {{ todo.text }}
    </li>
  </ul>
</div>

<script>
  const { createApp, ref } = Vue;
  createApp({
    setup() {
      const newTodo = ref('');
      const todos = ref([]);
      function addTodo() {
        if (newTodo.value.trim()) {
          todos.value.push({ text: newTodo.value.trim(), done: false });
          newTodo.value = '';
        }
      }
      return { newTodo, todos, addTodo };
    }
  }).mount('#app');
</script>

// 原生方式：状态管理混乱
var userName = '';
var userEmail = '';
var isLoggedIn = false;

function updateUserName(name) {
  userName = name;
  document.getElementById('userName').textContent = name;
  // 忘记同步其他依赖userName的地方
}

function login() {
  isLoggedIn = true;
  // 需要手动更新所有相关的UI
  document.getElementById('loginBtn').style.display = 'none';
  document.getElementById('logoutBtn').style.display = 'block';
}

// React方式：状态管理清晰
const [userName, setUserName] = useState('');
const [userEmail, setUserEmail] = useState('');
const [isLoggedIn, setIsLoggedIn] = useState(false);

// 状态变化自动触发UI更新
function updateUserName(name) {
  setUserName(name); // UI自动更新
}

function login() {
  setIsLoggedIn(true); // 所有依赖isLoggedIn的组件自动更新
}

// 原生方式：频繁DOM操作，性能差
for (var i = 0; i < 1000; i++) {
  var li = document.createElement('li');
  li.textContent = 'Item ' + i;
  document.getElementById('list').appendChild(li); // 每次循环都操作DOM
}

// React方式：虚拟DOM，批量更新
const items = Array.from({ length: 1000 }, (_, i) => `Item ${i + 1}`);

// React会自动批量更新DOM
return (
  <ul>
    {items.map((item, index) => (
      <li key={index}>{item}</li>
    ))}
  </ul>
);

// 虚拟DOM示例
const vdom = {
  type: 'div',
  props: { className: 'container' },
  children: [
    {
      type: 'h1',
      props: {},
      children: ['Hello World']
    },
    {
      type: 'ul',
      props: {},
      children: [
        { type: 'li', props: {}, children: ['Item 1'] },
        { type: 'li', props: {}, children: ['Item 2'] }
      ]
    }
  ]
};

// React组件示例
function UserCard({ name, email, avatar }) {
  return (
    <div className="user-card">
      <img src={avatar} alt={name} />
      <h3>{name}</h3>
      <p>{email}</p>
    </div>
  );
}

// 使用组件
function App() {
  return (
    <div>
      <UserCard name="张三" email="zhang@example.com" avatar="/avatar1.jpg" />
      <UserCard name="李四" email="li@example.com" avatar="/avatar2.jpg" />
    </div>
  );
}

// 命令式：告诉浏览器怎么做
const list = document.getElementById('list');
list.innerHTML = ''; // 先清空
data.forEach(item => {
  const li = document.createElement('li');
  li.textContent = item.name;
  li.className = item.active ? 'active' : '';
  list.appendChild(li);
});

// 声明式：告诉浏览器要什么
return (
  <ul>
    {data.map(item => (
      <li key={item.id} className={item.active ? 'active' : ''}>
        {item.name}
      </li>
    ))}
  </ul>
);

import React, { useState } from 'react';

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState('');

  const addTodo = () => {
    if (input.trim()) {
      setTodos([...todos, { id: Date.now(), text: input, done: false }]);
      setInput('');
    }
  };

  const toggleTodo = (id) => {
    setTodos(todos.map(todo =>
      todo.id === id ? { ...todo, done: !todo.done } : todo
    ));
  };

  const deleteTodo = (id) => {
    setTodos(todos.filter(todo => todo.id !== id));
  };

  return (
    <div className="todo-app">
      <h1>Todo List</h1>
      <div>
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          onKeyPress={(e) => e.key === 'Enter' && addTodo()}
          placeholder="添加新任务"
        />
        <button onClick={addTodo}>添加</button>
      </div>
      <ul>
        {todos.map(todo => (
          <li key={todo.id} style={{ textDecoration: todo.done ? 'line-through' : 'none' }}>
            <span onClick={() => toggleTodo(todo.id)}>{todo.text}</span>
            <button onClick={() => deleteTodo(todo.id)}>删除</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

<template>
  <div class="todo-app">
    <h1>Todo List</h1>
    <div>
      <input
        v-model="input"
        @keyup.enter="addTodo"
        placeholder="添加新任务"
      />
      <button @click="addTodo">添加</button>
    </div>
    <ul>
      <li
        v-for="todo in todos"
        :key="todo.id"
        :style="{ textDecoration: todo.done ? 'line-through' : 'none' }"
      >
        <span @click="toggleTodo(todo.id)">{{ todo.text }}</span>
        <button @click="deleteTodo(todo.id)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const todos = ref([]);
const input = ref('');

const addTodo = () => {
  if (input.value.trim()) {
    todos.value.push({ id: Date.now(), text: input.value, done: false });
    input.value = '';
  }
};

const toggleTodo = (id) => {
  const todo = todos.value.find(t => t.id === id);
  if (todo) todo.done = !todo.done;
};

const deleteTodo = (id) => {
  todos.value = todos.value.filter(t => t.id !== id);
};
</script>