Vue 核心概念
响应式数据
Vue 通过 Object.defineProperty 或 Proxy（Vue 3）实现数据响应式。当数据变化时，视图自动更新。
模板语法
支持插值表达式 {{ data }}、指令（如 v-if、v-for）和动态属性绑定 v-bind（简写 :）。
指令
v-model：双向数据绑定，常用于表单元素。v-on：事件绑定（简写@），如@click="handler"。v-for：循环渲染，需配合:key提升性能。
计算属性与侦听器
computed：基于依赖缓存，适合复杂逻辑计算。watch：监听数据变化，适合异步操作或副作用处理。
组件化开发
组件通信
- Props：父组件向子组件传递数据。
- 自定义事件：子组件通过
$emit触发父组件监听的事件。 - Provide/Inject：跨层级组件通信。
- Vuex/Pinia：状态管理库，解决复杂组件共享状态问题。
生命周期钩子
- Vue 2：
created、mounted、updated、destroyed等。 - Vue 3：
setup替代部分钩子，新增onMounted等组合式 API。
高级特性
插槽（Slot）
- 默认插槽：
<slot></slot>。 - 具名插槽：
<slot name="header"></slot>，使用v-slot:header或#header。 - 作用域插槽：子组件传递数据给父组件。
动态组件
通过 <component :is="currentComponent"></component> 动态切换组件。
异步组件
使用 defineAsyncComponent 或动态 import() 实现按需加载。
Vue 3 新特性
组合式 API
ref和reactive创建响应式数据。setup函数整合逻辑，替代data、methods等选项。watchEffect自动追踪依赖并执行副作用。
Composition API 工具
toRefs：解构响应式对象不丢失响应性。computed和watch与 Vue 2 类似，但更灵活。
性能优化
虚拟 DOM 与 Diff 算法
Vue 通过虚拟 DOM 减少直接操作 DOM，优化渲染性能。
Key 的作用
在 v-for 中使用唯一 key 帮助 Vue 高效复用节点。
懒加载与代码分割
结合路由懒加载（() => import('./Component.vue')）减少首屏加载时间。
常见问题与技巧
Vue 2 与 Vue 3 差异
- Vue 3 使用 Proxy 实现响应式，支持多个根节点，移除
filters。 - 生命周期钩子命名变化（如
beforeDestroy→beforeUnmount）。
调试工具
- Vue Devtools：浏览器插件，用于检查组件树、状态和事件。
代码规范
- 组件名采用 PascalCase（如
MyComponent.vue）。 - 单文件组件（SFC）结构清晰，分块
<template>、<script>、<style>。
以上内容可结合官方文档和实际项目实践深入理解。