Vue基础入门
Vue基础入门目录
Vue概述
Vue实例
模板语法
数据绑定
条件渲染
列表渲染
事件处理
表单绑定
计算属性与侦听器
过滤器
Vue概述什么是VueVue是一套用于构建用户界面的渐进式JavaScript框架,由尤雨溪于2014年创建。与其他大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
Vue的特点
特点
说明
渐进式框架
可以逐步引入,无需全部掌握
组件化
允许使用小型、独立和可复用组件构建大型应用
指令系统
提供丰富的指令处理DOM操作
响应式数据绑定
数据变化自动更新视图
单文件组件
将HTML、CSS、JS写在同一个.vue文件中
Vue版本对比
特性
Vue2
Vue3
架构
Options API
Composition API + Options API
响应式原理
Object.defineProperty
Proxy
TypeScript支持
部分支持
完整支持
体积
约20KB
约10KB(优化后更小)
生命周期
bef ...
Vue响应式原理
Vue响应式原理目录
响应式概述
Vue2响应式原理
Vue3响应式原理
响应式实现对比
常见响应式问题
响应式性能优化
响应式概述什么是响应式响应式是指当数据发生变化时,视图会自动更新。Vue的核心特性之一就是响应式系统,它使得开发者无需手动操作DOM,只需要关注数据的变化即可。
1234567┌─────────────┐ 变更数据 ┌─────────────┐│ Data │ ───────────────> │ View ││ (数据) │ │ (视图) │└─────────────┘ └─────────────┘ ▲ │ │ 自动追踪依赖 │ └────────────────────────────────┘
响应式数据流1234567// 数据驱动视图data: { message: ...
Vue组件系统
Vue组件系统目录
组件基础
组件通信
插槽
动态组件
组件生命周期
组件高级特性
组件基础组件概念组件是可复用的Vue实例,每个组件都有自己的模板、数据、方法、计算属性等。
1234567891011121314151617┌─────────────────────────────────────┐│ Vue组件 │├─────────────────────────────────────┤│ ┌─────────────────────────────────┐││ │ Template (HTML模板) │││ └─────────────────────────────────┘││ ┌─────────────────────────────────┐││ │ Script (逻辑) │││ │ - data │││ │ - methods │ ...
Vue3新特性与Composition API
Vue3新特性与Composition API目录
Vue3概述
创建Vue3项目
Composition API
响应式API
生命周期
依赖注入
Teleport
Suspense
全局API变化
新组件
Vue3概述Vue3主要新特性
特性
说明
Proxy响应式
使用Proxy替代Object.defineProperty
Composition API
新增组合式API,更灵活的代码组织
Teleport
原生支持将组件渲染到任意DOM
Suspense
原生支持异步组件loading状态
Fragment
组件可以有多根节点
更好的TypeScript支持
完整TypeScript支持
更小更快的体积
优化后的打包体积
更强大的Tree-shaking
更多API可以按需引入
Vue3 vs Vue2对比
方面
Vue2
Vue3
架构
Options API
Composition API + Options API
响应式
Object.defineProperty
Proxy
入口函数
new Vue() ...
Vue生态与工程化
Vue生态与工程化目录
Vue CLI
Vite
构建工具对比
工程化最佳实践
Element UI
Ant Design Vue
项目结构
代码规范
Vue CLIVue CLI简介Vue CLI是Vue官方提供的脚手架工具,用于快速创建Vue项目。它提供了交互式的项目初始化、内置的开发服务器、配置加载等功能。
123456789101112# 安装npm install -g @vue/cli# 创建项目vue create my-project# 启动开发服务器cd my-projectnpm run serve# 构建生产版本npm run build
Vue CLI项目结构1234567891011121314151617181920212223my-project/├── public/│ ├── favicon.ico│ └── index.html├── src/│ ├── assets/│ │ └── logo.png│ ├── components/│ │ └── HelloWorld.vue│ ├── router/│ ...
Vue路由
Vue路由目录
路由基础
路由配置
路由跳转
路由传参
路由守卫
路由元信息
编程式导航
路由进阶
路由基础SPA与路由123456789101112131415┌─────────────────────────────────────────────────────────────┐│ SPA 应用 ││ ││ ┌─────────────┐ ││ │ Browser │ ││ ├─────────────┤ ││ │ #/home │ ────> 渲染 Home 组件 ...
Vue状态管理
Vue状态管理目录
状态管理概述
Vuex基础
Pinia基础
Pinia vs Vuex
状态管理实践
模块化设计
状态管理概述为什么需要状态管理123456789101112131415161718192021222324252627282930313233343536373839┌─────────────────────────────────────────────────────────────┐│ Props层层传递问题 ││ ││ ┌─────────┐ ││ │ Root │ ││ └────┬────┘ ...
Vue3生态与进阶
Vue3生态与进阶目录
TypeScript支持
自定义指令
渲染函数
Vue3动画
SSR与Nuxt
SSG与VitePress
测试
性能优化
TypeScript支持TypeScript配置1234567891011121314151617181920212223// tsconfig.json{ "compilerOptions": { "target": "ES2020", "module": "ESNext", "strict": true, "jsx": "preserve", "moduleResolution": "node", "skipLibCheck": true, "esModuleInterop": true, "allowSyntheti ...
Vue2面试核心问题
Vue2面试核心问题目录
基础概念
组件相关
响应式原理
路由相关
状态管理
性能优化
实际应用
基础概念1. Vue的核心特性是什么?参考答案:
特性
说明
响应式数据绑定
数据变化自动更新视图
组件系统
组件化开发,可复用
指令系统
v-if/v-for/v-bind/v-on等
虚拟DOM
高效的DOMdiff算法
单文件组件
.vue文件包含模板、逻辑、样式
2. Vue2和Vue3的区别?参考答案:
对比项
Vue2
Vue3
响应式原理
Object.defineProperty
Proxy
组件根节点
必须一个根元素
支持多根节点(Fragment)
API风格
Options API
Composition API + Options API
生命周期
beforeCreate/created等
onBeforeMount/onMounted等
TypeScript
partial support
完整支持
打包体积
~20KB
~10KB
性能
一 ...
Vue3面试核心问题
Vue3面试核心问题目录
Vue3新特性
Composition API
响应式原理
与Vue2对比
实战问题
Vue3新特性1. Vue3有哪些新特性?参考答案:
新特性
说明
Composition API
组合式API,更灵活的代码组织
Proxy响应式
替代Object.defineProperty
Teleport
传送到任意DOM
Suspense
异步组件加载状态
Fragment
多根节点组件
Tree-shaking
更多API按需引入
更小更快
优化后的打包体积
TypeScript
完整类型系统支持
自定义渲染器
自定义渲染API
2. setup函数是什么?参考答案:
setup是Vue3新增的入口函数,在beforeCreate之前执行:
1234567891011export default { setup() { // this是undefined const count = ref(0) // setup需要返回对象才能在模板中使用 return { ...
