最新 Vue3、TypeScript、组合式API、setup语法糖 学习笔记

1、创建 Vue3 工程

基于 vue-cli 创建（基于webpack实现）

备注：目前 vue-cli 已处于维护模式，官方推荐基于 Vite 创建项目。

// 查看 @vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version

// 安装或者升级你的@vue/cli
npm install -g @vue/cli

// 执行创建命令
vue create vue_demo

基于 vite 创建（推荐）

• vite 是新一代前端构建工具，官网地址：https://vitejs.cn
• vite 的优势如下：
  • 轻量快速的热重载（HMR），能实现极速的服务启动。
  • 对 TypeScript 、JSX、CSS 等支持开箱即用。
  • 真正的按需编译，不再等待整个应用编译完成。
• 创建项目请看上面笔记
• https://blog.csdn.net/qq_33365152/article/details/132917242

2、Vue3 项目开发 vscode 插件推荐

自动补充 ref 变量 value 插件配置方法

3、Vue3 核心语法

【optionsAPI】与【CompositionAPI】

• Vue2 的 API 设计是 Options（配置）风格的。（选项式API）
• Vue3 的 API 设计是 Composition（组合）风格的。

Options API 的弊端

• Options 类型的 API ，数据、方法、计算属性等，是分散在：data、methods、computed中的，若想新增或者修改一个需求，就需要分别修改：data、methods、computed，不便于维护和复用。

Composition API 的优势

• 可以用函数的方式，更加优雅的组织代码，让相关功能的代码更加有序的组织在一起。

4、【拉开序幕的 setup】

• setup概念
• setup 是 Vue3 中一个新的配置项，值是一个函数，它是 Composition API “表演的舞台”，组合中所用到的：数据、方法、计算属性、监听…等等，均配置在 setup 中。
• 特点如下：
  • setup 函数返回的对象中的内容，可直接在模板中使用
  • setup 中访问 this 是 undefined
  • setup 函数会在 beforeCreate 之间调用，它是“领先”所有钩子执行的。

5、Vue3 自定义组件命名插件推荐

• 插件名称 vite-plugin-vue-setup-extend
• 安装

npm install vite-plugin-vue-setup-extend -D

• 配置，在 vite.config.ts 文件中

import {
    defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import {
    fileURLToPath, URL } from "node:url";
import VueSetupExtend from "vite-plugin-vue-setup-extend";

export default defineConfig({
   
  plugins: [vue(