Vue3 学习笔记

Vue3 是一套用于构建用户界面的渐进式框架，本文按复习视角梳理模板语法、组合式 API、组件、ECharts、axios 与 ElementPlus 的核心要点与常见易错点。

1. 模板语法与响应式

【重点要点】

• 插值 支持表达式、不支持下语句；v-text 渲染纯文本，v-html 渲染 HTML，注意 v-html 存在 XSS 风险。
• 属性绑定用 v-bind（简写 :），事件绑定用 v-on（简写 @）。
• 响应式核心：ref 适合基本类型，JS 中取值必须 .value；reactive 适合对象，直接访问属性；两者在模板中都会自动解包。
• 条件渲染 v-if / v-else-if / v-else 会增删节点，v-show 只切换 display；列表用 v-for。
• 易错点：JS 中忘写 .value；v-for 的 :key 用唯一 id，不要直接用 index。

<template>
  <p>{{ msg }}</p>
  <a :href="url">访问官网</a>
  <button @click="count++">点击次数：{{ count }}</button>
  <p v-if="count > 5">已经点超过 5 次了</p>
  <ul>
    <li v-for="item in list" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script setup>
import { ref } from 'vue'
const msg = ref('你好，Vue3')
const count = ref(0)
const url = ref('https://vuejs.org')
const list = ref([{ id: 1, name: '模板' }, { id: 2, name: '响应式' }])
</script>

2. 组合式 API

【重点要点】

• 组合式 API 以 <script setup> 为入口，按逻辑功能组织代码，替代选项式的 data/methods/computed。
• computed 有缓存，依赖变化才重算；watch 侦听数据变化，可配 { deep: true, immediate: true }；watchEffect 自动追踪依赖。
• 生命周期：请求接口常用 onMounted，清理定时器/事件用 onBeforeUnmount。
• 跨层级传值用 provide / inject；ref 处理基本类型，reactive 处理对象。
• 易错点：computed 内不要写副作用；watch 监听 reactive 对象的属性需用 getter 或开启 deep。

import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'

const price = ref(10)
const total = computed(() => price.value * 2)

watch(total, (newVal, oldVal) => {
  console.log(`变化：${oldVal} -> ${newVal}`)
})

let timer = null
onMounted(() => { timer = setInterval(() => price.value++, 1000) })
onBeforeUnmount(() => clearInterval(timer))

3. 各种简单组件

【重点要点】

• 组件是复用的基本单元：父传子用 props，子组件通过 defineProps 声明；子传父用 defineEmits 触发事件。
• 插槽 slot 承载父组件注入的内容：具名插槽 <template #header>，作用域插槽可接收子组件数据。
• defineExpose 把子组件内部方法暴露给父组件，通过 ref 调用；组件上也可直接使用 v-model 双向绑定。
• 易错点：props 是单向数据流，子组件不能直接修改；事件名建议使用 kebab-case 便于模板书写。

<!-- 子组件 Child.vue -->
<script setup>
defineProps(['title'])
const emit = defineEmits(['close'])
</script>

<template>
  <div class="card">
    <h3>{{ title }}</h3>
    <slot>默认插槽内容</slot>
    <button @click="emit('close')">关闭</button>
  </div>
</template>

<!-- 父组件使用 -->
<script setup>
import Child from './Child.vue'
import { ref } from 'vue'

const visible = ref(true)
</script>

<template>
  <Child :title="'提示'" @close="visible = false">
    <p>这是插槽传入的内容</p>
  </Child>
</template>

4. 图标,数据报表的前端框架ApacheECharts

【重点要点】

• ECharts 是 Apache 开源的数据可视化图表库，基于 JavaScript 的 canvas，适合做报表大盘。
• 使用流程：npm install echarts → echarts.init(dom) → setOption(配置)。
• 常用图表：line 折线、bar 柱状、pie 饼图；常用配置项：title、tooltip、legend、xAxis、yAxis、series。
• 在 onMounted 中初始化，onBeforeUnmount 中 dispose() 销毁；窗口变化时调用 chart.resize()。
• 易错点：容器必须有固定高度否则不显示；重复 init 同一容器会告警，需先 dispose；数据变化用 setOption 覆盖。

import * as echarts from 'echarts'
import { ref, onMounted, onBeforeUnmount } from 'vue'

const chartRef = ref(null)
let chart = null

onMounted(() => {
  chart = echarts.init(chartRef.value)
  chart.setOption({
    xAxis: { type: 'category', data: ['周一', '周二', '周三'] },
    yAxis: { type: 'value' },
    series: [{ type: 'line', data: [120, 200, 150] }]
  })
  window.addEventListener('resize', chart.resize)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', chart.resize)
  chart && chart.dispose()
})

<div ref="chartRef" style="width: 100%; height: 400px"></div>

5. axios请求

【重点要点】

• axios 是基于 Promise 的 HTTP 客户端，支持 get/post 等别名方法，配合 then/catch 或 async/await 使用。
• 常用配置：baseURL 统一前缀、timeout 超时、headers 携带 token。
• 拦截器：请求拦截器统一加 token、开 loading；响应拦截器统一拆数据、处理错误码与 401 跳转登录。
• 页面中一般放在 onMounted 或事件函数里发起请求，配合 try/catch 处理异常。
• 易错点：响应内容是 res.data，业务数据常嵌套为 res.data.data；GET 参数用 params，POST 用 data。

import axios from 'axios'

const request = axios.create({
  baseURL: '/api',
  timeout: 5000
})

// 请求拦截器：统一携带 token
request.interceptors.request.use(config => {
  config.headers.Authorization = localStorage.getItem('token')
  return config
})

// 响应拦截器：统一处理错误
request.interceptors.response.use(
  res => res.data,
  err => {
    if (err.response && err.response.status === 401) {
      location.href = '/login'
    }
    return Promise.reject(err)
  }
)

// 页面中使用
async function getList() {
  try {
    const data = await request.get('/list', { params: { page: 1 } })
    console.log(data)
  } catch (err) {
    console.error('请求失败', err)
  }
}

6. ElementPlus组件图标使用

【重点要点】

• Element Plus 是 Vue3 的桌面端组件库：npm install element-plus，支持全量引入与按需自动导入（unplugin-vue-components / unplugin-auto-import）。
• 常用组件：el-button、el-input、el-form 表单校验（rules + prop + validate()）、el-table、el-dialog、ElMessage 消息提示。
• 图标单独成包：npm i @element-plus/icons-vue，引入注册后可在模板中直接使用，或放入 <el-icon> 内。
• 易错点：按需引入必须配好插件否则样式丢失；图标组件需先 import 才能用；表单 prop 必须与 model 字段名一致。

<template>
  <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
    <el-form-item label="用户名" prop="name">
      <el-input v-model="form.name" placeholder="请输入用户名">
        <template #prefix>
          <el-icon><User /></el-icon>
        </template>
      </el-input>
    </el-form-item>
    <el-button type="primary" @click="submit">
      <el-icon><Promotion /></el-icon> 提 交
    </el-button>
  </el-form>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { User, Promotion } from '@element-plus/icons-vue'

const formRef = ref(null)
const form = reactive({ name: '' })

const rules = {
  name: [{ required: true, message: '请输入用户名', trigger: 'blur' }]
}

function submit() {
  formRef.value.validate(valid => {
    if (valid) {
      ElMessage.success('校验通过，提交成功')
    } else {
      ElMessage.error('请检查表单内容')
    }
  })
}
</script>