Vue基础｜青训营渐进式框架 Vue 是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。组合式 API

渐进式框架

Vue 是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。但 Web 世界是十分多样化的，不同的开发者在 Web 上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点，Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点。根据你的需求场景，你可以用不同的方式使用 Vue：

无需构建步骤，渐进式增强静态的 HTML
在任何页面中作为 Web Components 嵌入
单页应用 (SPA)——单个页面不断切换内容，让其感觉到许多页面
全栈 / 服务端渲染 (SSR)
Jamstack / 静态站点生成 (SSG)
开发桌面端、移动端、WebGL，甚至是命令行终端中的界面

渐进式——可以在某个功能使用，也可以在整个项目中使用

Vue版本

目前，在开发中，Vue有两个大版本可以选择Vue2和Vue3，老项目一般都是Vue2的，而新项目一般都选择Vue3开发

我们本套课程讲解版本为Vue3，因为Vue3涵盖了Vue2的知识体系，当然Vue3也增加了很多新特性

Vue API 风格

Vue 的组件可以按两种不同的风格书写：选项式 API 和组合式 API
大部分的核心概念在这两种风格之间都是通用的。熟悉了一种风格以后，你也能够很快地理解另一种风格

选项式 API (Options API)——vue2

使用选项式 API，我们可以用包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例

 <script>
 export default {
  data() {
   return {
    count: 0
    }
   },
  methods: {
   increment() {
    this.count++
    }
   },
  mounted() {
   console.log(`The initial count is ${this.count}.`)
   }
 }
 </script>
 
 
 <template>
  <button @click="increment">Count is: {{ count }}</button>
 </template>

组合式 API (Composition API)——vue3

通过组合式 API，我们可以使用导入的 API 函数来描述组件逻辑。

 <script setup>
 import { ref, onMounted } from 'vue'
 const count = ref(0)
 function increment() {
  count.value++
 }
 onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
 })
 </script>
 <template>
  <button @click="increment">Count is: {{ count }}</button>
 </template>

该选哪一个？

两种 API 风格都能够覆盖大部分的应用场景。它们只是同一个底层系统所提供的两套不同的接口。实际上，选项式 API 是在组合式 API 的基础上实现的！关于 Vue 的基础概念和知识在它们之间都是通用的。

在生产项目中

当你不需要使用构建工具，或者打算主要在低复杂度的场景中使用 Vue，例如渐进增强的应用场景，推荐采用选项式 API
当你打算用 Vue 构建完整的单页应用，推荐采用*=组合式 API + 单文件组件*

Vue开发前的准备

构建工具让我们能使用 Vue 单文件组件 (SFC)。Vue 官方的构建流程是基于 Vite 的，一个现代、轻量、极速的构建工具

前提条件

熟悉命令行

已安装 15.0 或更高版本的 Node.js

Vue基础｜ 青训营