学习前端技术

Vue.js 是一个渐进式 JavaScript 框架，用于构建用户界面。它的核心库只关注视图层，可以很容易地与其他库或现有项目集成。Vue.js 采用了 MVVM 模式，通过双向数据绑定将视图和数据同步起来，使得开发者可以更加方便地管理数据和视图。

为什么要学前端框架

写这篇笔记的起因很简单：作为一个平时以后端为主的开发者，绕不开的一个事实是，页面早晚要自己动手。传统的 jQuery 写法里，数据散落在 DOM 各处，改一个状态要手动找到对应的节点去更新，页面一复杂，代码就成了一团难以维护的面条。Vue.js 解决的正是这个问题——把「数据」和「视图」的同步交给框架，开发者只关心数据本身。加上它「渐进式」的定位，不要求整个项目推倒重来，可以先在一个页面、一个模块里引入试水，这对已有项目的团队非常友好。

Vue.js - The Progressive JavaScript Framework | Vue.js

Vue.js 的特点

Vue.js 的特点：

1）双向数据绑定：Vue.js 通过双向数据绑定来实现数据和视图的自动同步更新，使得开发者可以更加方便地管理数据和视图。背后的机制是数据劫持加发布-订阅：框架会拦截对数据属性的读写，读的时候收集依赖，写的时候通知对应的视图更新。开发者改的是一个普通的 JavaScript 对象，页面就自动跟着变了，不用再手动操作 DOM。

2）组件化开发：Vue.js 支持组件化开发，可以将一个页面拆分成多个独立的组件，每个组件都有自己的数据和视图，可以方便地复用和维护。组件之间通过 props 向下传数据、通过事件向上通知，边界清晰。这和后端拆分模块、按职责划分类的思路是一致的，后端出身的人理解起来并不困难。

3）轻量级易上手：Vue.js 的 API 简单易懂，学习曲线较低，可以快速上手，并且与其他框架和库（如 React、Angular）兼容。官方文档是中文的，示例足够多，一个 script 标签引入就能开始写，不强制上构建工具，这一点对入门者很关键。

4）面向模板编程：Vue.js 支持面向模板编程，可以将 HTML 和 JavaScript 代码分离，使得代码更加清晰易读。模板本质上还是 HTML，只是多了插值和指令，写页面结构的时候所见即所得，逻辑则收敛在组件的 JavaScript 部分。

Vue.js 技术细节

Vue.js 技术细节：

1）Virtual DOM：Vue.js 使用 Virtual DOM 技术来实现高效的 DOM 操作，提高性能和用户体验。原理是先在内存里用 JavaScript 对象描述一份 DOM 树，数据变化时生成新的虚拟树，与旧树做 diff 比对，最后只把真正变化的部分应用到真实 DOM 上。直接操作真实 DOM 的开销很大，这层中间结构把「改哪里」的计算留在了内存中，代价低得多。

2）生命周期：Vue.js 组件有自己的生命周期，包括创建、挂载、更新和销毁等阶段，可以在不同的阶段执行不同的操作。比如发起接口请求一般放在创建完成之后，需要访问真实 DOM 的逻辑要等到挂载完成，定时器、事件监听这类资源则应当在销毁阶段清理。理解生命周期，是理解「我的代码到底在什么时机执行」的关键。

3）指令和事件：Vue.js 提供了一些指令和事件，如 v-if、v-for、v-on 等，可以方便地操作 DOM 元素和处理用户事件。v-if 控制元素是否渲染，v-for 负责列表循环，v-on 绑定事件回调。指令把常见的 DOM 操作声明在模板里，读模板就能看出页面的行为，比在 JavaScript 里到处 addEventListener 直观。

4）插件和组件库：Vue.js 生态系统丰富，有大量的插件和组件库可供使用，可以快速构建高质量的应用程序。路由、状态管理有官方方案，UI 层面也有成熟的组件库，中后台页面基本可以拼装出来，不必所有轮子都自己造。

TypeScript 带来的变化

现在的前端技术已经变化太多，特别是 TypeScript 的融入后，我个人觉得前景很好。JavaScript 一直是弱类型语言，配合 TypeScript 之后有了固定语法，数据类型和 Class 的概念之后，前端逻辑更加清晰明了。加上vue的组件化，前端也可以大致分为 MVC 模式开发。可以通过 TypeScript ,Vue 结合 编写组件，复杂的业务逻辑处理层。这确实比以前的技术编写方式清晰了许多。

对写惯了强类型语言的人来说，这个变化的意义在于：接口的数据结构可以用类型定义描述出来，编辑器能做补全和检查，很多低级错误在编译阶段就暴露了，而不是等到浏览器里报 undefined。前端项目的规模越大，这层约束的价值越明显。

踩坑与注意

学习过程中有几点值得提醒：

1）双向绑定不是万能的。数据劫持有其边界，某些对对象和数组的操作方式框架感知不到，遇到「数据改了页面没动」的情况，先查一下响应式的限制，而不是怀疑框架坏了。

2）不要在组件里直接操作 DOM。既然交给框架管理视图，就应当通过数据驱动页面变化，混用手动 DOM 操作容易和框架的更新机制打架，问题很难排查。

3）组件拆分要适度。拆得太碎，props 层层透传会很痛苦；不拆，单个组件又会膨胀。按「能独立复用、职责单一」来把握粒度比较合适。

小结

Vue.js 用双向数据绑定和组件化把前端开发从手工操作 DOM 中解放了出来，Virtual DOM 和生命周期则是理解它运行方式的两把钥匙。对后端开发者而言，配合 TypeScript 之后，前端代码也有了类型和分层的秩序感，上手成本比想象中低。这篇笔记先记录概念层面的认识，后续在实际项目里踩到的坑，再另行整理。