Dx's Tech Notes

Vue

12 min read

  • 快速入门

使用步骤

  • 准备工作
    • 引入Vue模块
    • 创建Vue的应用实例
    • 定义元素（div），交给Vue控制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue快速入门</title>
 
    
</head>
<body>
    
    <div id="app">
        <h1>{{message}}</h1>
    </div>
 
 
    <script type="module">
          import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
 
        createApp({
            data(){
                return {
                message: ' hello vue'
                }
            }
        }).mount('#app');
    </script>
</body>
</html>

常用指令

  • 通过v-bind或者v-model绑定的变量,必须在数据模型中声明

  • 示例

案例

生命周期

Ajax

怎么理解 Vue

  • 可以先把 Vue 理解成一个用来写前端页面的框架
  • 它的作用和 React 类似，都是为了更方便地开发页面
  • 对初学者来说，Vue 的写法通常更接近 HTML、CSS、JavaScript 的自然组合

后端视角的理解

  • 如果不使用框架，前端通常是 HTML 写结构、CSS 写样式、JavaScript 写交互
  • Vue 做的事情，就是把这三部分组织得更清晰、更适合工程开发
  • 它让页面可以拆成一个个组件，每个组件各自管理自己的结构、逻辑和样式

可以粗暴理解为：

  • Vue = 更工程化的 HTML + CSS + JavaScript

一个 .vue 文件怎么理解

一个 Vue 单文件组件通常分成三部分：

  • template
    • 写页面结构
  • script
    • 写页面逻辑和数据
  • style
    • 写当前组件的样式

示例：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="add">点击</button>
    <p>当前计数：{{ count }}</p>
  </div>
</template>
 
<script setup>
import { ref } from 'vue'
 
const message = ref('hello vue')
const count = ref(0)
 
const add = () => {
  count.value++
}
</script>
 
<style scoped>
h1 {
  color: #e11d48;
}
</style>

这个文件可以这样看：

  • {{ message }}
    • 把变量渲染到页面上
  • @click="add"
    • 点击按钮时执行方法
  • ref(0)
    • 定义一个响应式变量，值变化后页面会自动更新

Vue 的核心思想

先记住下面 4 个概念：

  • 组件
    • 页面不是一整个大文件，而是拆成很多小块
  • 数据驱动视图
    • 数据变了，页面自动跟着变
  • 响应式
    • 变量变化后，不需要自己手动改 DOM
  • 指令
    • 比如 v-if、v-for、v-model，用于控制显示、循环和表单绑定

Vue 和 React 的简单对比

  • Vue
    • 更偏模板式写法，看起来更像在写 HTML
  • React
    • 更偏 JavaScript 写法，灵活度更高

可以先这样记：

  • Vue 对应 React
  • Nuxt 对应 Next.js

如果从业务开发角度理解 Vue

写一个页面时，大概流程是：

  1. 在 template 里把静态页面结构写出来
  2. 在 script 里定义数据、方法和接口调用逻辑
  3. 页面加载时调用后端接口
  4. 后端返回 JSON
  5. 把 JSON 放进响应式变量
  6. 页面自动渲染出最新数据

这和后端开发里“查数据再展示”很像，只不过 Vue 负责自动刷新页面。

面试里可以怎么说

如果面试官问你怎么理解 Vue，可以答：

我对 Vue 的理解是，它本质上也是一个组件化前端框架。它把页面拆成组件，通过响应式数据驱动页面更新。相比 React，Vue 的模板写法更接近 HTML，上手会更直观。一个 .vue 文件通常就是 template、script、style 三部分，分别对应结构、逻辑和样式。常见业务页面、表单、列表、接口联调这些场景，我能看懂也能做基础修改。

学 Vue 时优先掌握什么

  • 一个 .vue 文件怎么看
  • ref 和 reactive
  • v-if
  • v-for
  • v-model
  • 组件传参 props
  • onMounted 里调接口
  • 常见的列表、表单、按钮点击交互

组件结构和接口调用逻辑

这一块是业务开发里最常见的内容。

从后端视角看，可以把一个 Vue 页面理解成：

  • 父组件
    • 相当于页面总控，负责组织页面、管理数据、调用接口
  • 子组件
    • 相当于页面零件，负责输入区、表格区、弹窗区、详情区
  • api 模块
    • 相当于前端的接口客户端，专门负责发请求

一个常见的目录结构

src/
  views/user/UserPage.vue
  components/user/UserSearch.vue
  components/user/UserTable.vue
  api/user.js

可以这样理解：

  • UserPage.vue
    • 页面入口，负责把搜索区和表格区组装起来
  • UserSearch.vue
    • 搜索条件组件
  • UserTable.vue
    • 表格展示组件
  • api/user.js
    • 专门封装用户相关接口

最常见的组件拆分思路

比如一个“用户查询页面”，通常可以拆成：

  • 搜索区
    • 输入用户名，点击查询
  • 表格区
    • 展示用户列表
  • 分页区
    • 控制页码和条数

一般不建议把这些东西全写在一个 .vue 文件里。

更常见的做法是：

  • 父组件负责数据和接口
  • 子组件负责展示和事件抛出

示例 1：父组件负责总控

UserPage.vue

<template>
  <div>
    <h2>用户管理</h2>
 
    <UserSearch @search="handleSearch" />
 
    <UserTable :list="userList" :loading="loading" />
  </div>
</template>
 
<script setup>
import { ref, onMounted } from 'vue'
import UserSearch from '@/components/user/UserSearch.vue'
import UserTable from '@/components/user/UserTable.vue'
import { queryUserList } from '@/api/user'
 
const loading = ref(false)
const userList = ref([])
const queryParams = ref({
  keyword: ''
})
 
const loadUserList = async () => {
  loading.value = true
  try {
    const res = await queryUserList(queryParams.value)
    userList.value = res.data
  } finally {
    loading.value = false
  }
}
 
const handleSearch = async (keyword) => {
  queryParams.value.keyword = keyword
  await loadUserList()
}
 
onMounted(() => {
  loadUserList()
})
</script>

这个父组件主要做了 4 件事：

  • 维护页面状态
    • loading、userList、queryParams
  • 组织子组件
    • 搜索组件和表格组件
  • 调用后端接口
    • queryUserList
  • 接收子组件事件
    • @search="handleSearch"

示例 2：子组件负责搜索条件

UserSearch.vue

<template>
  <div>
    <input v-model="keyword" placeholder="请输入用户名" />
    <button @click="doSearch">查询</button>
  </div>
</template>
 
<script setup>
import { ref } from 'vue'
 
const emit = defineEmits(['search'])
const keyword = ref('')
 
const doSearch = () => {
  emit('search', keyword.value)
}
</script>

这里的重点是：

  • v-model
    • 把输入框和变量 keyword 绑定
  • emit('search', keyword.value)
    • 子组件自己不调接口，而是把事件通知给父组件

也就是说：

  • 子组件负责“用户做了什么操作”
  • 父组件负责“收到操作后怎么查数据”

示例 3：子组件负责表格展示

UserTable.vue

<template>
  <div>
    <p v-if="loading">加载中...</p>
 
    <table v-else border="1">
      <thead>
        <tr>
          <th>ID</th>
          <th>用户名</th>
          <th>年龄</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in list" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.username }}</td>
          <td>{{ item.age }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
 
<script setup>
defineProps({
  list: {
    type: Array,
    default: () => []
  },
  loading: {
    type: Boolean,
    default: false
  }
})
</script>

这里的重点是：

  • props
    • 父组件把数据传给子组件
  • v-if
    • 控制加载中显示
  • v-for
    • 循环渲染表格数据

所以这个组件只负责一件事：

  • 把父组件给的数据展示出来

示例 4：接口调用模块

api/user.js

export async function queryUserList(params) {
  const response = await fetch('/api/users/query', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(params)
  })
 
  if (!response.ok) {
    throw new Error('查询用户列表失败')
  }
 
  return response.json()
}

这部分你可以直接类比成后端里的：

  • UserClient
  • FeignClient
  • HttpClient

它的职责就是：

  • 发送请求
  • 处理请求头和参数
  • 返回 JSON 数据

整个调用链怎么走

把上面的代码串起来，页面流程就是：

  1. 页面加载
  2. 父组件 onMounted 执行
  3. 调用 loadUserList
  4. loadUserList 调用 queryUserList
  5. 后端返回 JSON
  6. 把结果赋值给 userList
  7. UserTable 收到新的 list
  8. 页面自动刷新显示数据

如果用户点击查询按钮，流程是：

  1. 用户在 UserSearch 输入关键字
  2. 点击查询按钮
  3. 子组件通过 emit 把关键字传给父组件
  4. 父组件更新 queryParams
  5. 父组件再次调用接口
  6. 表格拿到新数据并更新

你要重点理解的其实只有 3 件事

  • 数据往下传
    • 父组件通过 props 把数据传给子组件
  • 事件往上传
    • 子组件通过 emit 把操作通知给父组件
  • 接口由父组件统一调度
    • 这样页面逻辑更清晰，维护起来更简单

为什么一般让父组件调接口

因为这样更容易统一管理：

  • 查询参数
  • 加载状态
  • 错误提示
  • 列表数据
  • 分页数据

如果每个子组件都自己调接口，后面页面一复杂就容易乱。

对后端同学来说怎么类比最容易懂

可以这样类比：

  • 父组件
    • 相当于页面控制层
  • 子组件
    • 相当于页面局部视图组件
  • api 模块
    • 相当于调用后端服务的客户端
  • props
    • 相当于父组件给子组件传参
  • emit
    • 相当于子组件回调父组件

面试里可以怎么说

如果面试官问你 Vue 页面里的组件结构和接口调用逻辑，你可以答：

一般我会把页面拆成父子组件。父组件负责页面总控，包括查询参数、列表数据、加载状态和接口调用；子组件负责搜索区、表格区、弹窗区这种局部展示。数据通常通过 props 从父组件传给子组件，用户操作通过 emit 从子组件通知父组件。接口调用一般集中放在 api 模块里，由父组件统一调度。这样组件职责更清晰，也更方便维护和联调。

Graph View

Backlinks