vue知识点总结

Vue 核心概念

响应式数据

Vue 通过 Object.defineProperty 或 Proxy(Vue 3)实现数据响应式。当数据变化时,视图自动更新。

模板语法

支持插值表达式 {``{ data }}、指令(如 v-ifv-for)和动态属性绑定 v-bind(简写 :)。

指令

  • v-model:双向数据绑定,常用于表单元素。
  • v-on:事件绑定(简写 @),如 @click="handler"
  • v-for:循环渲染,需配合 :key 提升性能。

计算属性与侦听器

  • computed:基于依赖缓存,适合复杂逻辑计算。
  • watch:监听数据变化,适合异步操作或副作用处理。

组件化开发

组件通信

  • Props:父组件向子组件传递数据。
  • 自定义事件 :子组件通过 $emit 触发父组件监听的事件。
  • Provide/Inject:跨层级组件通信。
  • Vuex/Pinia:状态管理库,解决复杂组件共享状态问题。

生命周期钩子

  • Vue 2createdmountedupdateddestroyed 等。
  • Vue 3setup 替代部分钩子,新增 onMounted 等组合式 API。

高级特性

插槽(Slot)

  • 默认插槽:<slot></slot>
  • 具名插槽:<slot name="header"></slot>,使用 v-slot:header#header
  • 作用域插槽:子组件传递数据给父组件。

动态组件

通过 <component :is="currentComponent"></component> 动态切换组件。

异步组件

使用 defineAsyncComponent 或动态 import() 实现按需加载。

Vue 3 新特性

组合式 API

  • refreactive 创建响应式数据。
  • setup 函数整合逻辑,替代 datamethods 等选项。
  • watchEffect 自动追踪依赖并执行副作用。

Composition API 工具

  • toRefs:解构响应式对象不丢失响应性。
  • computedwatch 与 Vue 2 类似,但更灵活。

性能优化

虚拟 DOM 与 Diff 算法

Vue 通过虚拟 DOM 减少直接操作 DOM,优化渲染性能。

Key 的作用

v-for 中使用唯一 key 帮助 Vue 高效复用节点。

懒加载与代码分割

结合路由懒加载(() => import('./Component.vue'))减少首屏加载时间。

常见问题与技巧

Vue 2 与 Vue 3 差异

  • Vue 3 使用 Proxy 实现响应式,支持多个根节点,移除 filters
  • 生命周期钩子命名变化(如 beforeDestroybeforeUnmount)。

调试工具

  • Vue Devtools:浏览器插件,用于检查组件树、状态和事件。

代码规范

  • 组件名采用 PascalCase(如 MyComponent.vue)。
  • 单文件组件(SFC)结构清晰,分块 <template><script><style>

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

相关推荐
小*-^-*九1 小时前
Electron vue项目 打包 exe文件
javascript·vue.js·electron
AI视觉网奇4 小时前
rknn yolo11 推理
前端·人工智能·python
gplitems1234 小时前
Gunslinger – Gun Store & Hunting WordPress Theme: A Responsible
开发语言·前端·javascript
Winson℡7 小时前
React Native 中的 useCallback
javascript·react native·react.js
wyzqhhhh7 小时前
less和sass
前端·less·sass
Nan_Shu_6148 小时前
学习:uniapp全栈微信小程序vue3后台-额外/精彩报错篇
前端·学习·微信小程序·小程序·uni-app·notepad++
excel9 小时前
Vue3 中的双向链表依赖管理详解与示例
前端
谢尔登9 小时前
【Nest】基本概念
javascript·node.js·express
老华带你飞9 小时前
机电公司管理小程序|基于微信小程序的机电公司管理小程序设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·微信小程序·小程序·机电公司管理小程序
前端小白从0开始10 小时前
Chrome DevTools高级用法:性能面板内存泄漏排查
前端·chrome·chrome devtools