什么是Vue?
Vue是一款用于构建用户界面的JavaScript框架。
它基于标准HTML、CSS和JavaScript构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单的还是复杂地界面,Vue都可以胜任。
- 声明式渲染:Vue基于标准HTML拓展了一套模板语法,使得我们可以声明式地描述最终输出地HTML和JavaScript状态之间的关系。
- 响应性:Vue会自动跟踪JavaScript状态并在其发生变化时响应式地更新DOM。
渐进式框架
Vue是一个框架,也是一个生态。其功能覆盖了大部分前端开发常见地需求。但Web世界是十分多样化的,不同的开发者在Web上构建的东西可能在形式和规模上会有很大的不同。
Vue的设计非常注重灵活性和“可以被逐步集成”这个特点。根据你的需求场景,你可以用不同的方式使用Vue:
- 无需构建步骤,渐进式增强静态的HTML
- 在任何页面中作为Web Components嵌入
- 单页应用(SPA)
- 全栈/服务端渲染(SSR)
- Jamstack/静态站点生成(SSG)
- 开发桌面端、移动端、web GL、甚至是命令终端中的界面
单文件组件
在大多数启用了构建工具的Vue项目中,我们可以使用一种类似HTML格式的文件来书写Vue组件,它被称为单文件组件。
Vue的单文件组件会将一个组件的逻辑(JavaScript),模板(HTML)和样式(CSS)封装在同一个文件里面。
单文件组件是Vue的标志性功能。推荐用它来编写Vue组件。
API风格
Vue的组件可以按两种不同的风格书写:选项式API和组合式API。
选项式API:
使用选项式API,我们可以用包含多个选项的对象来描述组件的逻辑,选项所定义的属性会暴露在函数内部的this上,它会指向当前的组件实例。
组合式API:
通过组合式API,我们可以使用导入的API函数来描述组件逻辑。在单文件组件中,组合式API通常会与<script setup>搭配使用。
选项式API与组合式API该选择哪一个?
两种API风格都能覆盖大部分的应用场景。它们只是同一个底层系统所提供的两套不同的接口。实际上,选项式API是在组合式API的基础上实现的。
在生产项目中:当你不需要使用构建工具,或者打算主要在低复杂度的场景中使用Vue,推荐采用选项式API。 当你打算用Vue构建完整的单页应用,推荐采用组合式API+单文件组件。