Vue的几个基本概念

本文档旨在介绍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的常规用法就是选项式。在组件上暴露一些选项比如:datamethodsmounted等,都会是函数内部的 this 指向当前组件实例。

组合式API (Composition API)
  • <script setup> 搭配使用。
  • 选项式 API 是在组合式 API 的基础上实现的

为方便代码风格保持和代码运维,建议整个项目都是用组合式。不建议两种模式掺杂使用。

4. 更多核心概念概述

4.1 模板语法
4.2 响应式
4.3 生命周期
4.4 Props
4.5 路由
4.6 Pinia
4.7 Vuex
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容