零基础也能搞懂的技术探索与实践：从迷茫到能解面试题
大家好，我是一个曾经靠背《滕王阁序》拿奖学金的中文系学生。三年前，我连“终端”是什么都不知道，如今却在一家科技公司做前端开发。今天写这篇教程，就是想告诉所有和我一样“非科班出身”的朋友：技术没有那么可怕，只要路径对了，你也能行。
这篇文章不会堆砌术语，而是带你综合地理解一个真实开发中会遇到的问题，并通过动手实践，最终能应对常见的面试题挑战。我们将以“如何选择合适的工具来搭建一个简单的待办事项（To-Do List）应用”为例，走一遍完整的探索与决策过程。
为什么要做“技术选型”？这不就是选个工具吗？
我当初学的时候，以为写代码就是打开编辑器狂敲就行。结果第一次接到任务：“用前端技术做个待办清单”，我直接懵了——该用什么框架？React？Vue？还是原生 JavaScript？每种都说自己好，到底选哪个？
这就是“技术选型”——在多个可行方案中，根据项目需求、学习成本、社区支持等因素，选出最适合的一个。它不是炫技，而是解决问题的第一步。
第一步：明确需求，别一上来就装框架
在动手之前，先问自己三个问题：
这个应用要实现什么功能？
- 添加任务
- 标记完成/未完成
- 删除任务
- 数据能保存（刷新不丢失）
谁会用？用在哪儿？
- 个人练习项目，不需要用户登录、后台接口
我现在的水平如何？
- 完全零基础，只懂 HTML/CSS 基础
基于这些，我们可以排除重型方案（比如需要配置 Webpack、TypeScript 的 React 项目），优先选择上手快、文档好、社区活跃的工具。
第二步：主流方案对比（附真实体验）
下面是我当初试过的三种方案，用表格对比一下：
| 方案 | 学习难度 | 是否需要构建工具 | 数据持久化支持 | 适合场景 | 我的踩坑经历 |
|---|---|---|---|---|---|
| 原生 JavaScript | ⭐⭐ | 否 | 需手动用 localStorage |
超小项目、学习原理 | 代码越写越乱，状态管理头疼 |
| Vue 3（组合式 API） | ⭐⭐⭐ | 可选（可用 CDN） | 易集成 localStorage |
中小型项目、快速原型 | 第一天就跑通，文档超友好 |
| React（函数组件 + Hooks） | ⭐⭐⭐⭐ | 通常需要 Vite/Vite | 需额外处理状态持久化 | 大型项目、团队协作 | 初学时被“闭包陷阱”搞崩溃 |
💡 我的建议：如果你是零基础，从 Vue 3 开始。它允许你用最简单的方式引入（甚至不用安装 Node.js），而且语法直观，像写 HTML 一样写逻辑。
第三步：动手！用 Vue 3 搭建你的第一个 To-Do 应用
1. 环境准备（真的只要 1 分钟）
不需要装 Node.js！我们用 CDN 直接引入 Vue 3：
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的待办清单</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<!-- 这里写 Vue 代码 -->
</div>
<script>
// 下面写 JavaScript 逻辑
</script>
</body>
</html>
保存为 index.html，双击用浏览器打开即可！这就是你的开发环境。
2. 核心概念：响应式数据 + 方法
Vue 的核心思想是：数据变了，页面自动更新。
我们定义一个 tasks 数组来存任务，再写几个方法操作它：
<script>
const { createApp, ref } = Vue
createApp({
setup() {
// 响应式数据：用 ref 包裹
const tasks = ref([
{ id: 1, text: '买牛奶', done: false }
])
const newTask = ref('')
// 添加任务
const addTask = () => {
if (newTask.value.trim()) {
tasks.value.push({
id: Date.now(),
text: newTask.value,
done: false
})
newTask.value = ''
saveToStorage() // 保存到本地
}
}
// 切换完成状态
const toggleDone = (task) => {
task.done = !task.done
saveToStorage()
}
// 删除任务
const removeTask = (id) => {
tasks.value = tasks.value.filter(t => t.id !== id)
saveToStorage()
}
// 保存到 localStorage
const saveToStorage = () => {
localStorage.setItem('tasks', JSON.stringify(tasks.value))
}
// 从 localStorage 读取
const loadFromStorage = () => {
const saved = localStorage.getItem('tasks')
if (saved) {
tasks.value = JSON.parse(saved)
}
}
// 页面加载时读取
loadFromStorage()
return {
tasks,
newTask,
addTask,
toggleDone,
removeTask
}
}
}).mount('#app')
</script>
3. 写模板（HTML 部分）
在 <div id="app"> 里写：
<h1>我的待办清单</h1>
<input v-model="newTask" @keyup.enter="addTask" placeholder="输入新任务">
<button @click="addTask">添加</button>
<ul>
<li v-for="task in tasks" :key="task.id">
<input type="checkbox" v-model="task.done">
<span :style="{ textDecoration: task.done ? 'line-through' : 'none' }">
{{ task.text }}
</span>
<button @click="removeTask(task.id)">删除</button>
</li>
</ul>
现在刷新页面，试试添加、勾选、删除任务——刷新后数据还在！
新手常问的三个问题
❓ 问题1：为什么用 ref？不能直接写 let tasks = [...] 吗？
不行！Vue 需要知道“数据变了”，所以要用 ref() 包裹，让它变成“响应式”。你可以把 ref 想象成一个“魔法盒子”，里面的东西一变，Vue 就知道要更新页面。
❓ 问题2：v-model 是什么？怎么实现双向绑定？
v-model="newTask" 相当于：
- 输入框的值 =
newTask.value - 输入框内容变化时，自动更新
newTask.value
它省去了你手动监听 input 事件的麻烦。
❓ 问题3：面试会考这个吗？
会！ 很多公司第一轮 coding test 就是“做一个带本地存储的 To-Do List”。你不仅做了，还理解了技术选型的逻辑，这就是“综合能力”的体现。
面试题挑战：你能回答这几个问题吗？
为什么选择 Vue 而不是 React？
→ 因为项目小、学习曲线平缓、无需复杂构建工具，适合快速验证想法。如何保证数据不丢失？
→ 使用localStorage在每次状态变更时保存，页面加载时读取。如果任务量很大（比如上万条），这个方案有什么问题？
→localStorage有大小限制（约 5MB），且同步操作会阻塞主线程。这时应考虑 IndexedDB 或后端数据库。
这些问题，正是面试官考察你“是否只会复制粘贴”的关键。
下一步怎么学？
- 巩固基础：把上面的代码自己手敲一遍，不要复制。
- 尝试扩展：加个“筛选”功能（显示全部/仅未完成/仅已完成）。
- 对比学习：用原生 JS 重写一遍，感受“有框架”和“无框架”的差异。
- 进阶挑战：把数据存到免费的后端服务（如 Firebase），实现多设备同步。
最后说两句
技术探索不是“选最牛的工具”，而是“选最合适的工具”。我当初花了一周纠结用哪个框架，后来发现：先跑起来，再优化，才是正道。
你现在做的这个小项目，可能就是你简历上的第一个作品，也是你面对“面试题挑战”时的底气。别怕慢，只要方向对，每一步都算数。
加油，未来的程序员！
评论 0