Vue 任务清单开发：数据驱动 vs 传统 DOM 操作

在前端开发中，任务清单是一个常见的案例，通过这个案例我们可以清晰对比传统 DOM 操作与 Vue 数据驱动开发的差异。本文将结合具体代码，解析 Vue 的核心思想和常用 API。

传统开发方式的局限

传统 JavaScript 开发中，我们需要手动操作 DOM 元素来实现功能。以下代码为例：

xml 复制代码

<h2 id="app"></h2>
<input type="text" id="todo-input">
<script>
    // 传统方式需要先获取DOM元素
    const app = document.getElementById('app');
    const todoInput = document.getElementById('todo-input');
    
    // 手动绑定事件并操作DOM
    todoInput.addEventListener('change',function(event) {
        const todo = event.target.value.trim();
        if(!todo){
            console.log('请输入任务');
            return ;
        }else{
            // 直接修改DOM内容
            app.innerHTML = todo;
        }
    })
</script>

这种方式的特点是：

需要手动获取 DOM 元素
命令式地操作 DOM 进行更新
业务逻辑与 DOM 操作混杂
随着功能复杂，代码会变得难以维护

Vue 的数据驱动开发理念

Vue 采用了完全不同的思路：开发者只需关注数据本身，而非 DOM 操作。以任务清单为例：

xml 复制代码

<template>
  <div>
    <!-- 数据绑定 -->
    <h2>{{ title }}</h2>
    <!-- 双向数据绑定 -->
    <input type="text" v-model="title" @keydown.enter="addTodo">
    
    <!-- 条件渲染 -->
    <ul v-if="todos.length">
      <!-- 循环渲染 -->
      <li v-for="todo in todos" :key="todo.id">
        <input type="checkbox" v-model="todo.done">
        <span :class="{done: todo.done}">{{ todo.title }}</span>
      </li>
    </ul>
    <div v-else>暂无计划</div>
  </div>
</template>

Vue 的核心思想是：不再关心页面元素如何操作，只关注数据如何变化。当数据发生改变时，Vue 会自动更新 DOM，开发者无需手动操作。

Vue 常用 API 解析

v-model 双向数据绑定
ini 复制代码
```
<input type="text" v-model="title">
```
实现表单输入与数据的双向绑定，输入框的变化会自动更新数据，数据的变化也会自动反映到输入框。
v-for 循环渲染
ini 复制代码
```
<li v-for="todo in todos" :key="todo.id">
```
基于数组渲染列表，:key用于标识每个元素的唯一性，提高渲染性能。
v-if/v-else 条件渲染
xml 复制代码
```
<ul v-if="todos.length">
  ...
</ul>
<div v-else>暂无计划</div>
```
根据条件动态渲染不同的内容，当todos数组为空时显示 "暂无计划"。
:class 动态类绑定
css 复制代码
```
<span :class="{done: todo.done}">{{ todo.title }}</span>
```
当todo.done为true时，自动为元素添加done类，实现完成状态的样式变化。
@事件监听
ini 复制代码
```
<input type="text" @keydown.enter="addTodo">
```
监听键盘回车事件，触发addTodo方法，@是v-bind:的缩写。

computed 计算属性

javascript 复制代码

// 计算未完成的任务数量
const active = computed(() => {
  return todos.value.filter(todo => !todo.done).length
})

// 全选功能的实现
const allDone = computed({
  get(){
    return todos.value.every(todo => todo.done)
  },
  set(val){
    todos.value.forEach(todo => todo.done = val)
  }
})

计算属性具有缓存特性，只有依赖的数据变化时才会重新计算，相比方法调用更节省性能。全选功能展示了计算属性的高级用法，通过get和set实现双向绑定。

ref 响应式数据
csharp 复制代码
```
import { ref } from 'vue'
const title = ref("");
const todos = ref([...])
```
创建响应式数据，当这些数据变化时，Vue 会自动更新相关的 DOM。

总结

Vue 通过数据驱动的方式，极大简化了前端开发流程：

开发者可以专注于业务逻辑和数据处理
减少了大量手动 DOM 操作的代码
提供了简洁直观的 API，降低学习成本
内置的性能优化（如计算属性缓存）让应用运行更高效