跳至主要內容
5. 重新学习vue3 响应式reactive

1. rective 创建一个响应式对象

2. ref 和 reactive

  • vue 使用 proxy API创建响应式，但是 proxy 只能代理对象。
  • ref 使用 defined
  • reactive 使用 proxy
  • ref 实际调用了 reactive API

此时产生的问题:

  • reactive 性能更好，应该推荐用户使用 reactive。
  • ref 实际调用 reactive，是不是代表：只需要 ref
Tang Yuan2025/11/30vue3小于 1 分钟
组合式api中的 watch
  1. 创建一个 useCount.js 文件，包含 变量 和 watch
// useCount.ts
import { ref, watch } from 'vue'

const count = ref(0)

const doubleCount = ref(0)

function handleChangeCount() {
  count.value++
}

watch(count, () => {
  doubleCount.value = count.value * 2
})

export function useCounter() {
  return {
    count,
    handleChangeCount,
    doubleCount,
  }
}
Tang Yuan2025/11/28vue3小于 1 分钟
date-fns / date-fns-tz / @date-fns/tz 包说明

本文档用于说明上述三个包的关系、差异以及推荐的使用方式。

1. 包简介

date-fns

轻量级、模块化的 JavaScript 日期处理库，提供格式化、解析、计算等基础操作。
不包含任何时区处理能力。

示例：

import { format, addDays } from "date-fns";

format(new Date(), "yyyy-MM-dd");
addDays(new Date(), 7);
Tang Yuan2025/11/27date-fnsdate-fns大约 2 分钟
4. 重新学习vue3 响应式ref

1. 使用 ref 创建一个响应式数据

<template>
  <div>{{ num }}</div>
</template>

<script setup>
import { ref } from 'vue'
const num = ref(0)
</script>
Tang Yuan2025/11/27vue3大约 1 分钟
封装axios

1. 完成的目标，使用

// api.ts
import apiRequset form 'request.ts'

// 用户管理
export async function getList(data: {
  page: number;
  pageSize: number;
}) {
  const token = await getToken();
  return await apiRequest<PageData<Platform>>({
    url: "api/list",
    method: "POST",
    data,
    token,
  });
}

// view
const requestParams = {
  page: 1,
  pageSize: 10
}
const { data } = await getList(requestParams);
Tang Yuan2025/11/27vue3 axios大约 2 分钟
3. 重新学习vue3 模板语法

1. 文本插值

最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号)

<template>
  <div>{{ name }}</div>
</template>

<script setup>
const name = "lorem";
</script>
Tang Yuan2025/11/26vue3大约 3 分钟
Welcome
Copyright © 2025 Tang Yuan