vue知识点总结

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>。

---

以上内容可结合官方文档和实际项目实践深入理解。