vue 3极简教程草稿（未完成）

几个文件的关系：

如果想要实现页面中数据的更新，则需要进行响应式数据绑定，也就是将数据定义成响应式数据。

Vue为开发者提供了如下函数用于定义响应式数据。
lref()函数
lreactive()函数
ltoRef()函数
ltoRefs()函数
这四个函数都是 Vue3 实现响应式的核心，但针对的场景和数据类型各有侧重，通过一张表快速对比核心差异：

函数	适用数据类型	访问方式	核心特点	核心场景
ref()	基本类型 / 对象 / 数组	基本类型：.value；对象：可直接访问（或.value）	包裹成 Ref 对象，万能型响应式	单个简单数据（数字 / 字符串 / 布尔）
reactive()	对象 / 数组（非基本）	直接访问属性（无需.value）	代理整个对象，解构会丢失响应式	复杂数据结构（多属性对象 / 数组）
toRef()	reactive 对象的单个属性	同 ref（.value）	关联原对象，属性修改双向同步	解构 reactive 对象的单个属性
toRefs()	reactive 对象的所有属性	同 ref（.value）	批量转 ref，解构后仍保响应式	解构 reactive 对象的多个属性

---

<template>{{ message }}</template>
<script setup>
import { ref } from 'vue'
const message = ref('会当凌绝顶，一览众山小')
setTimeout(() => {
  message.value = '锲而不舍，金石可镂'
}, 2000)
</script>

<template>{{ obj.message }}</template>
<script setup>
import { reactive } from 'vue'
const obj = reactive({ message: '不畏浮云遮望眼，自缘身在最高层' })
setTimeout(() => {
  obj.message = '欲穷千里目，更上一层楼'
}, 2000)
</script>

<template>
  <div>message的值：{{ message }}</div>
  <div>obj.message的值：{{ obj.message }}</div>
</template>
<script setup>
import { reactive, toRef } from 'vue'
const obj = reactive({ message: '黑发不知勤学早，白首方悔读书迟' })
const message = toRef(obj, 'message')
setTimeout(() => {
  message.value = '少壮不努力，老大徒伤悲'
}, 2000)
</script>

vue 属性与计算属性的区别：

<template>
  <div>
    <!-- 普通属性：直接拿家底 -->
    <p>家底数字：{{ num }}</p>
    <!-- 计算属性：加工后的成品 -->
    <p>翻倍结果：{{ doubleNum }}</p>
    <p>再看一次翻倍：{{ doubleNum }}</p> <!-- 这里不会重新算！ -->
    <button @click="num++">点我把家底+1</button>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

// 普通属性：存数字5（家底）
const num = ref(5)

// 计算属性：拿家底5算翻倍（做蛋炒饭）
const doubleNum = computed(() => {
  console.log('我开始算了！') // 看有没有重新算的标志
  return num.value * 2
})
</script>

1. 普通属性是「存家底」的，计算属性是「用家底做菜」的；
2. 计算属性有「剩菜热着吃」的缓存，普通属性没有（省性能）；
3. 普通属性能直接改，计算属性默认得改 "家底" 才会跟着变。

要 "存数据" 用普通属性，要 "算数据" 用计算属性。

第三章：组件基础

生命周期相关：

1. onBeforeMount()：组件还没 "摆到页面上" 的时候触发。可以在这准备数据，但这会儿页面里还看不到这个组件。

2. onMounted()：组件成功 "显示在页面上" 后触发。这时候能操作页面里的元素（比如获取按钮、输入框），也适合调接口拿数据然后渲染到页面。

3. onBeforeUpdate()：组件里的数据要变、页面要刷新前触发。可以在这记录 "更新前的旧数据"，做些准备工作。

4. onUpdated()：组件的页面元素已经刷新完成后触发。数据变了、页面也重新渲染好了，这时候能处理更新后的页面内容。

5. onBeforeUnmount()：组件要被 "从页面删掉" 之前触发。得在这清理 "遗留垃圾"------ 比如关掉定时器、取消事件绑定，避免占内存。

6. onUnmounted()：组件已经彻底 "从页面删掉" 后触发

这些生命周期钩子的常用场景：

• onBeforeMount()：

  • 初始化不需要依赖页面元素的变量（比如定义一个计算用的临时数组）；
  • 预处理接口请求的参数（提前拼好请求 URL）。

• onMounted()：

  • 操作页面元素（比如获取按钮的宽度、给输入框自动聚焦）；
  • 调用接口请求数据（拿到数据后渲染到页面）；
  • 初始化第三方插件（比如在 DOM 上挂载 ECharts 图表、地图组件）。

• onBeforeUpdate()：

  • 记录更新前的旧数据（比如表单修改前存一份原始值，方便后续对比）；
  • 做更新前的校验（比如判断数据变化是否符合规则，避免无效更新）。

• onUpdated()：

  • 调整更新后的 DOM 位置（比如列表数据刷新后，自动滚动到上次浏览的位置）；
  • 同步第三方插件状态（比如图表数据更新后，重新渲染图表）。

• onBeforeUnmount()：

  • 清除定时器 / 计时器（防止组件销毁后还在运行，占内存）；
  • 取消未完成的接口请求（避免组件没了还收到请求结果）；
  • 移除自定义事件监听（比如之前绑了 window 的滚动事件，这里要解绑）。

• onUnmounted()：

  • 释放大型资源（比如销毁画布、视频播放器实例）；
  • 记录组件销毁的日志（用于统计或排查问题）

vue 父组件向子组件传静态数据与递动态数据：

子组件：

<template>
  <div>
    <p>静态接收的内容：{{ staticMsg }}</p>
    <p>动态接收的内容：{{ dynamicMsg }}</p>
  </div>
</template>

<script>
export default {
  // 声明接收的props
  props: {
    staticMsg: String, // 静态传值（默认字符串）
    dynamicMsg: [String, Number] // 动态传值（支持字符串/数字）
  }
}
</script>

父组件：

<template>
  <div>
    <!-- 1. 静态传值：无v-bind，值是固定字符串 -->
    <!-- 2. 动态传值：用:绑定父组件的data数据 -->
    <Child staticMsg="我是静态数据" :dynamicMsg="parentData" />
    
    <!-- 按钮：修改父组件data，测试响应式 -->
    <button @click="changeData">修改父组件数据</button>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  components: { Child },
  data() {
    return {
      parentData: '我是动态初始数据'
    }
  },
  methods: {
    changeData() {
      // 修改父组件data
      this.parentData = '动态数据更新了！'
      // 注意：静态传值的staticMsg不会变，因为没绑定响应式
    }
  }
}
</script>

第五章：路由： 👉 路由 = 根据 URL，决定页面显示哪个组件

刷新页面、复制链接、前进后退，页面状态还能对得上，这就是路由的作用。

一、路由整体在干嘛

用户点链接 / 改 URL
↓
路由器看到路径
↓
匹配到规则
↓
把对应组件
↓
显示到 <router-view>

---

二、前端路由 vs 后端路由

后端路由：
URL → 服务器 → 返回新页面

前端路由（Vue）：
URL → JS → 切换组件（不刷新页面）

---

三、Vue Router 最基本的 4 步

① 准备组件

Home.vue
About.vue

👉 页面长什么样

---

② 写路由规则（router.js）

const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About }
]

👉 规则：什么路径 → 什么组件

---

③ 创建路由器

createRouter({
  history: createWebHashHistory(),
  routes
})

👉 路由正式启动

---

④ 页面里用

<router-link to="/home">首页</router-link>
<router-view />

👉

• router-link：点哪里

• router-view：显示哪里

---

四、重定向（自动跳转）

{ path: '/', redirect: '/home' }

👉

访问 /

自动跳到 /home

---

五、嵌套路由（页面里套页面）

路由规则

{
  path: '/about',
  component: About,
  children: [
    { path: 'tab1', component: Tab1 },
    { path: 'tab2', component: Tab2 }
  ]
}

页面结构

<router-link to="/about/tab1">tab1</router-link>
<router-view />

👉
大页面不变，小区域切换

---

六、动态路由（路径里带参数）

定义规则

{ path: '/movie/:id', component: MovieDetails }

访问

/movie/1
/movie/2

取值

$route.params.id

👉

同一个组件

用不同 id 显示不同内容

---

七、命名路由（不写路径，写名字）

定义

{ path: '/movie/:id', name: 'MovieDetails' }

跳转

router.push({
  name: 'MovieDetails',
  params: { id: 3 }
})

👉

好处：

• 不怕路径改

• 代码更清楚

---

八、编程式导航（用 JS 跳转）

router.push('/home')     // 跳转
router.replace('/home')  // 不留历史
router.go(-1)            // 后退

👉

按钮、函数里用这个

---

九、导航守卫（进页面前先拦一下）

全局守卫

router.beforeEach((to, from, next) => {
  if (没登录 && 要去详情页) {
    next('/login')
  } else {
    next()
  }
})

👉
常用于：登录校验、权限控制

---

十、总结

Vue 路由 = 用 URL 控制组件显示，
通过 router-link 切换，
router-view 展示，
支持重定向、嵌套、动态参数、编程跳转和权限拦截。

好，这次我给你一版**"极简 + 代码白话流程版总结"，
只保留 最核心的东西**，一看就懂、一背就会 👌

（内容来自你给的第 7 章课件）

---

第 7 章：网络请求 & 状态管理

---

一、这一章到底在干嘛

Axios：从服务器拿数据
Vuex ：把数据统一存起来，大家一起用

---

二、Axios 是干嘛的（白话）

以前：数据写死在组件里
现在：数据 → 服务器 → 前端请求

👉 Axios = 专门发请求、拿数据的工具

---

三、Axios 请求流程

点按钮
↓
用 axios 发请求
↓
服务器返回数据
↓
存到变量里
↓
页面自动更新

---

四、Axios 最常用的两种请求

1️⃣ get（拿数据）

request({
  url: '/xxx',
  method: 'get',
  params: { id: 1 }
})

👉 用来 查数据

---

2️⃣ post（传数据）

request({
  url: '/xxx',
  method: 'post',
  data: { name: 'Tom' }
})

👉 用来 加 / 改数据

---

五、Axios 图书案例

mock 模拟接口
↓
axios 请求接口
↓
拿到图书数组
↓
v-for 渲染表格

---

六、Vuex 是干嘛的

Vuex = 全局数据仓库

👉

• 不用一层一层传数据

• 所有组件都能用同一份数据

---

七、Vuex 的核心结构

store = {
  state:      // 数据
  mutations: // 改数据（唯一合法方式）
  actions:   // 处理复杂逻辑（可选）
}

---

八、Vuex 数据流

页面点按钮
↓
commit 提交 mutation
↓
mutation 改 state
↓
页面自动更新

⚠️ 记住一句话：

组件不能直接改 state，只能通过 mutation

---

九、Vuex 计数器案例

store 里

state: {
  num: 0
},
mutations: {
  add(state) {
    state.num++
  }
}

页面里

store.commit('add')

显示

{{ store.state.num }}

---