Vue3.x核心技术与实战(八)
一、为什么要学 Vue3？
1.1 Vue3 的优势
1.2 Vue2 选项式 API VS Vue3 组合式 API
1.3 Vue3 组合式 API VS Vue2 选项式 API
需求：点击按钮，让数字+1
二、用 create-vue 搭建 Vue3 项目
2.1 认识 create-vue
create-vue 是Vue官方新的脚手架工具，底层切换到了vite(下一代构建工具)，为开发提供极速响应
2.2 使用 create-vue 创建项目
1. 前提环境条件
- 已安装 16.0 或更高版本的 Node.js
- node -v
2. 创建一个 Vue 应用
- npm init vue@latest
- 这一指令将会安装并执行 create-vue
① Shift + 鼠标右键 => 打开 PowerShell 窗口
② 准备工作：确认 node 版本
③ 创建一个 Vue 应用
2.3 熟悉项目目录和关键文件
关键文件：
1. vite.config.js - 项目的配置文件 基于vite的配置
2. package.json - 项目包文件 核心依赖项变成了Vue3.x 和 vite
3. main.js - 入口文件 createApp 函数创建应用实例
4. app.vue - 根组件 SFC单文件组件 script - template - style
- 变化一：脚本 script 和 模板 template 顺序调整
- 变化二：模板 template 不再要求唯一根元素
- 变化三：脚本 script 添加 setup 标识支持 组合式 API
5. index.html - 单页入口 提供 id 为 app 的挂载点
Vue3 项目中需要暂时禁用一下 Vue2 插件 Vetur：
Vue3 项目中 下载插件 volar：
三、组合式 API
3.1 setup 选项
3.1.1 setup 选项的写法和执行时机
setup 执行时期：在