Vue3 学习笔记

新文档学习笔记

开始

简介

什么是 Vue？

Vue 是一款用于构建用户界面的 JavaScript 框架

基于标准 HTML、CSS 和 JavaScript 构建

提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面

渐进式框架

Vue 被设计成具有灵活性和可逐步集成的特点，以适应不同需求场景

• 增强静态的 HTML 而无需构建步骤
• 在任何页面中作为 Web Components 嵌入
• 单页应用 (SPA)
• 全栈 / 服务端渲染 (SSR)
• Jamstack / 静态站点生成 (SSG)
• 目标为桌面端、移动端、WebGL，甚至是命令行终端

单文件组件

单文件组件，也被称为 *.vue 文件，英文缩写 SFC

Vue 的单文件组件会将一个组件的逻辑 (JavaScript)，模板 (HTML) 和样式 (CSS) 封装在同一个文件里

API 风格

Vue 的组件可以按两种不同的风格书写：选项式 API 和组合式 API

选项式 API

我们可以用包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted

选项所定义的属性都会暴露在函数内部的 this 上

this指向当前的组件实例

组合式 API

组合式 API 可以使用导入的 API 函数来描述组件逻辑

在单文件组件中，组合式 API 通常会与 <script setup> 搭配使用

setup attribute 标识用于告诉 Vue 需要在编译时进行转换，来减少使用组合式 API 时的样板代码

选谁

出于学习目的使用时，推荐采用自己更容易理解的方式

出于生产目的使用时，如果你不需要使用构建工具，或者只在低复杂度的场景中使用 Vue，可以采用选项式 API；当你想用 Vue 构建更大更完整的应用时，推荐使用组合式 API 和单文件组