最新 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
• 创建项目方法

npm create vite@latest

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

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(), VueSetupExtend()],
  resolve: {
   
    alias: {
   
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
  server: {
   
    open: true,
    port: 3000,
  },
});

• 命名组件名称

<script setup lang="ts" name="Text123"></script>	// Text123为该组件的名称

6、ref 创建：响应式数据

• 作用：定义响应式变量
• 类型：ref 能定义 基本类型 、对象类型 的响应式数据。
• 语法：cosnt xxx = ref(初始值)
• 返回值：一个 RefImpl 的实例对象，简称 ref对象 或 ref ， ref 对象的 value 属性是响应式的。
• 注意点：
  • JS 中操作数据需要：xxx.value ，但模板中不需要 .value ，直接使用即可。
  • 对于 let name=ref('张三')来说，name 不是响应式的， name.value 是响应式的。
  • 简单例子：

	<template>
  <div class="p">
    <h2>{
   {
    name }}</h2>
    <button @click="editHandle">修改</button>
  </div>
</template>

<script setup lang="ts">
import {
    ref } from "vue";
const name = ref<string>("hello world");

/**
 * 修改方法
 */
function editHandle() {
   
  name.value = "hello vue3";
}
</script>

<style>
.p {
   
  padding: 20px;
  background: #cdcdcd;
  border-radius: 20px;
}
h2 {
   
  color: #c00000;
}
</style>

7、reactive 创建：对象类型的响应式数据

• 作用：定义一个 响应式对象 （基本类型不要用它，要用 ref ，否则报错）
• 语法：let 响应式对象=reactive(源对象)
• 返回值：一个 Proxy 的实例对象，简称：响应式对象
• 注意点：reactive 定义的响应式数据是“深层次”的
• 简单示例：

<template>
  <div class="p">
    <h3>一辆{
   {
    card.name }}，价值{
   {
    card.price }}万</h3>

    <button @click="handle">增加价格</button>
  </div>
</template>

<script setup lang="ts" name="Text">
import {
    reactive } from "vue";

const card = reactive({
    name: "保时捷", price: 1000 });

/**
 * 操作姓名方法
 */
const handle = () => {
   
  card.price += 100;
};
</script>

<style scoped>
.p {
   
  padding: 20px;
  background: pink;
  border-radius: 20px;
}
h2 {
   
  color: blue;
}
</style>

8、ref 对比 reactive

• 宏观角度看：
  • 1、ref 用来定义：基本类型数据、对象类型数据
  • 2、reactive 用来定义：对象类型数据
• 区别：
  • 1、ref 创建的变量必须使用 .value （可以使用 TypeScript Vue Plugin(volar) 插件自动添加 .value）
  • 2、reactive 重新分配一个新对象，会失去响应式（可以使用Object.assign去整体替换）
• 使用原则：
  • 1、若需要一个基本类型的响应式数据，必须使用 ref
  • 2、若需要一个响应式对象，层级不深， ref 、 reactive 都可以
  • 3、若需要一个响应式对象，且层级较深，推荐使用 reactive（收集表单数据也推荐使用）
• 示例：修改整个 reactive 对象的方法

<template>
  <div class="p">
    <h3>一辆{
   {
    card.name }}，价值{
   {
    card.price }}万</h3>

    <button @click="handle">修改汽车品牌</button>
  </div>
</template>

<script setup lang="ts" name="Text">
import {
    reactive } from "vue";

const card = reactive({
    name: "保时捷", price: 100 });

/**
 * 修改汽车品牌方法
 */
const handle = () => {
   
  Object.assign(card, {
    name: "法拉利", price: 250 });
};
</script>

<style scoped>
.p {
   
  padding: 20px;
  background: pink;
  border-radius: 20px;
}
h2 {
   
  color: blue;
}
</style>

9、toRefs 与 toRef

• 作用：将一个响应式对象中的每一个属性，转换为 ref 对象
• 备注：toRefs 与 toRef 功能一致，但 toRefs 可以批量转换
• 语法如下：

<template>
  <div class="p">
    <h2>姓名：{
  { person.name }}</h2>
    <h2>年龄：{
  { person.age }}</h2>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
  </div>
</template>

<script setup lang="ts">
import {
      reactive, toRef, toRefs } from "vue";

const person = reactive({
     
  name: "张三",
  age: 18,
});

/**
 * toRefs 的使用
 */
let {
      name, age } = toRefs(person);

function changeName() {
     
  name.value += "~";
}
function changeAge() {
     
  age.value += 1;
}

/**
 * toRef 的使用
 */
const nl = toRef(person, "age");
console.log(nl.value);

</script>

<style scoped>
.p {
     
  padding: 20px;
  background: #cdcdcd;
  border-radius: 20px;
}
h2 {
     
  color: #c00000;
}
</style>

10、Computed（计算属性）和 watch（侦听器）

• 请看前面学习笔记：
• https://blog.csdn.net/qq_33365152/article/details/132775849

11、watchEffect

• 立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行该函数。
• watch 对比 watchEffect
  • 1、都能监听响应式数据的变化，不同的是监听数据变化的方式不同。
  • 2、watch ：要明确指出监听的数据。
  • 3、watchEffect ：不用明确指出监听的数据（函数中用到哪些属性，那就监听哪些属性）。
  • 示例代码：

<template>
  <div class="person">
    <h3>需求：当水温达到60度，或水位达到80cm时，给服务器发请求</h3>
    <h3>当前水温：{
  { temp }}℃</h3>
    <h3>当前水位：{
  { height }}cm</h3>
    <button @click="changeTemp">水温+10</button>
    <button @click="changeHeight">水位+10</button>
  </div>
</template>

<script setup lang="ts">
import {
      ref, watch, watchEffect } from "vue";

const temp = ref<number>(10);
const height = ref<number>(0