Vue3 核心知识点读书笔记
一、Vue 核心原理与架构
1. MVVM 核心模式（核心架构）
Vue 基于 MVVM 模式设计，核心是实现视图与数据的解耦，三者关系如下：
模块 |
核心职责 |
Model |
数据层，负责业务数据处理（纯数据，无视图交互逻辑） |
View |
视图层，即用户界面（仅展示内容，不处理数据逻辑） |
ViewModel |
桥梁层，连接 View 和 Model，包含两个核心能力： ✅ DOM Listeners：监听 View 中 DOM 变化，同步到 Model ✅ Data Bindings：监听 Model 中数据变化，同步到 View |
关键：View 和 Model 不能直接通信，必须通过 ViewModel 中转，实现解耦。
2. Vue 核心特性（四大核心）
特性 |
具体说明 |
示例/应用场景 |
数据驱动视图 |
数据变化自动触发视图重新渲染，无需手动操作 DOM |
修改变量值 → 页面自动更新 |
双向数据绑定 |
视图变化 ↔ 数据变化双向同步 |
表单输入框内容自动同步到数据变量 |
指令 |
分内置指令（Vue 自带）和自定义指令，以 |
|
插件 |
支持扩展功能，配置简单 |
VueRouter（路由）、Pinia（状态管理） |
二、Vue 版本与开发环境
1. Vue2 vs Vue3 核心差异
维度 |
Vue3 变化 |
新增功能 |
组合式（Composition）API、多根节点组件、底层渲染/响应式逻辑重构（性能提升） |
废弃功能 |
过滤器（Filter）、 |
兼容性 |
兼容 Vue2 绝大多数 API，新项目推荐直接使用 Vue3 |
2. 开发环境准备（必装）
- 编辑器：VSCode → 安装「Vue (Official)」扩展（提供代码高亮、语法提示）
- 运行环境：Node.js（官网下载安装，为包管理工具提供基础）
- 包管理工具：npm/yarn（管理第三方依赖，支持一键安装/升级/卸载，避免手动下载解压）
三、Vite 创建 Vue3 项目（核心操作）
1. 项目创建命令（适配 npm10 版本）
# Yarn 方式（推荐） yarn create vite hello-vite --template vue # 交互提示处理（关键步骤，不要遗漏）： # 1. 提示 "Use rolldown-vite (Experimental)?" → 回车选 No（优先使用稳定版） # 2. 提示 "Install with yarn and start now?" → 回车选 Yes（自动安装依赖并启动项目）
2. 手动创建命令（补充）
# npm 方式 npm create vite@latest # yarn 方式 yarn create vite # 后续需手动填写项目名称、选择框架（Vue）、选择变体（JavaScript）
四、Vue3 项目核心文件与目录
1. 项目目录结构（重点关注）
hello-vite/ # 项目根目录 ├── node_modules/ # 第三方依赖包（自动生成） ├── dist/ # 构建产物（执行 yarn build 后生成，用于部署） ├── src/ # 源代码目录（开发核心） │ ├── assets/ # 静态资源（图片、样式等） │ ├── components/ # 自定义组件 │ ├── App.vue # 根组件 │ ├── main.js # 项目入口文件 │ └── style.css # 全局样式 ├── index.html # 页面入口文件 └── package.json # 项目配置（依赖、脚本命令）
2. 核心文件代码解析（带完整注释）
（1）index.html（页面入口）
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>hello-vite</title> </head> <body> <!-- Vue 实例挂载容器：被 main.js 中的 Vue 实例控制 --> <div id="app"></div> <!-- type="module"：启用 ES6 模块化语法，引入项目入口文件 --> <script type="module" src="/src/main.js"></script> </body> </html>
（2）src/main.js（项目入口，创建 Vue 实例）
// 从 Vue 中导入创建应用实例的核心函数 import { createApp } from 'vue' // 导入全局样式文件 import './style.css' // 导入根组件（App.vue） import App from './App.vue' // 方式1：简洁写法（创建实例 + 挂载到 #app 容器） createApp(App).mount('#app') // 方式2：分步写法（更易理解，效果一致） // const app = createApp(App) // 创建 Vue 应用实例 // app.mount('#app') // 挂载实例（仅可调用一次）
（3）src/App.vue（根组件，单文件组件核心）
<!-- script setup：Vue3 组合式 API 语法糖，简化组件编写 --> <script setup> // 导入子组件（HelloWorld.vue） import HelloWorld from './components/HelloWorld.vue' </script> <!-- template：组件模板结构（视图部分） --> <template> <div> <a href="https://vite.dev" target="_blank"> <img src="/vite.svg" class="logo" alt="Vite logo" /> </a> <a href="https://vuejs.org/" target="_blank"> <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" /> </a> </div> <!-- 使用子组件，传递 msg 属性 --> <HelloWorld msg="Vite + Vue" /> </template> <!-- style scoped：样式仅作用于当前组件（通过 Hash 隔离，不影响子组件） --> <style scoped> .logo { height: 6em; padding: 1.5em; will-change: filter; transition: filter 300ms; } .logo:hover { filter: drop-shadow(0 0 2em #646cffaa); } .logo.vue:hover { filter: drop-shadow(0 0 2em #42b883aa); } </style>
五、核心知识点总结
1. 核心原理
- Vue 基于 MVVM 模式，通过 ViewModel 实现视图与数据的双向驱动，核心是「数据驱动视图」，无需手动操作 DOM；
- 双向数据绑定是 Vue 核心特性，表单场景下可自动同步视图与数据。
2. 项目开发
- Vue3 推荐使用 Vite 创建项目（比 VueCLI 更快），npm10 版本下优先用
yarn create vite 项目名 --template vue命令； - 项目核心文件：index.html（页面入口）→ main.js（创建 Vue 实例）→ App.vue（根组件），三者构成项目基础骨架。
3. 关键注意点
mount()方法仅可调用一次，挂载目标可以是 DOM 元素或 CSS 选择器（#app/.app）；<style scoped>样式仅作用于当前组件，避免样式污染；- Vue3 废弃了过滤器、
$on/$off/$once等功能，开发时需避开。
