登录Vue 任务清单开发：数据驱动 vs 传统 DOM 操作
Vue 任务清单开发：数据驱动 vs 传统 DOM 操作
在前端开发中，任务清单是一个常见的案例，通过这个案例我们可以清晰对比传统 DOM 操作与 Vue 数据驱动开发的差异。本文将结合具体代码，解析 Vue 的核心思想和常用 API。
传统开发方式的局限
传统 JavaScript 开发中，我们需要手动操作 DOM 元素来实现功能。以下代码为例：
<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 操作。以任务清单为例：
<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 双向数据绑定
<input type="text" v-model="title">实现表单输入与数据的双向绑定，输入框的变化会自动更新数据，数据的变化也会自动反映到输入框。
-
v-for 循环渲染
<li v-for="todo in todos" :key="todo.id">基于数组渲染列表，
:key用于标识每个元素的唯一性，提高渲染性能。 -
v-if/v-else 条件渲染
<ul v-if="todos.length"> ... </ul> <div v-else>暂无计划</div>根据条件动态渲染不同的内容，当
todos数组为空时显示 "暂无计划"。 -
:class 动态类绑定
<span :class="{done: todo.done}">{{ todo.title }}</span>当
todo.done为true时，自动为元素添加done类，实现完成状态的样式变化。 -
@事件监听
<input type="text" @keydown.enter="addTodo">监听键盘回车事件，触发
addTodo方法，@是v-bind:的缩写。 -
computed 计算属性
// 计算未完成的任务数量 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 响应式数据
import { ref } from 'vue' const title = ref(""); const todos = ref([...])创建响应式数据，当这些数据变化时，Vue 会自动更新相关的 DOM。
总结
Vue 通过数据驱动的方式，极大简化了前端开发流程：
- 开发者可以专注于业务逻辑和数据处理
- 减少了大量手动 DOM 操作的代码
- 提供了简洁直观的 API，降低学习成本
- 内置的性能优化（如计算属性缓存）让应用运行更高效
