本文档旨在介绍Vue的几个基本概念。参考了官方文档以及 《Vue.js设计与实现》(霍春阳 著)一书,笼统的罗列以下概念。
1. 什么是Vue
Vue (发音为 /vjuː/,类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以胜任。
2. Vue渐进式
什么是渐进式
渐进式开发(Incremental Development)是一种软件开发方法,其核心思想是将大型或复杂的项目分解为一系列小的、可管理的部分(通常称为“增量”或“迭代”),然后逐步设计、实现和交付这些部分。每个增量都会在上一个增量的基础上,增加新的功能或特性,最终构建出完整的系统。
Vue渐进式体现
Vue.js 的“渐进式”是其最核心的设计理念,意味着你可以根据项目需求和复杂度,逐步地采用 Vue 的功能。它既是一个可以轻松引入现有项目的轻量级视图库,也是一个能够构建复杂单页面应用(SPA)的完整框架。最明显的体现就是跟着项目的复杂度的慢慢升高使用 逐步集成 的方式进行学习开发。
| 应用场景 | 使用方式 | 说明 |
|---|---|---|
| 简单交互/学习使用 | 仅通过 <script>标签引入 Vue.js |
仅在Html文件中调用 script 标签引入使用即可 |
| 复杂单页面应用 | Vue.js + Vue Router + Pinia | 构建现代化的单页面应用,处理多视图、路由和复杂状态管理 |
| 全栈/企业级应用 | Vite + Vue.js + Vue Router + Pinia + SSR框架(如 Nuxt.js) | 构建高性能、SEO 友好、结构复杂的应用程序 |
白话说明:从这里也体现了Vue的学习成本要比React要低的原因,需要用到哪里我再去学习哪里,用到什么才去加载什么,这种可插拔的低耦合的模式大大的降低了学成成本,提高了开发效率。
3. API风格
选项式API (Options API)
Vue2的常规用法就是选项式。在组件上暴露一些选项比如:data,methods, mounted等,都会是函数内部的 this 指向当前组件实例。
组合式API (Composition API)
- 与
<script setup>搭配使用。 - 选项式 API 是在组合式 API 的基础上实现的
为方便代码风格保持和代码运维,建议整个项目都是用组合式。不建议两种模式掺杂使用。