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>

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

相关推荐
菜鸟una10 小时前
【瀑布流大全】分析原理及实现方式(微信小程序和网页都适用)
前端·css·vue.js·微信小程序·小程序·typescript
专注前端30年10 小时前
2025 最新 Vue2/Vue3 高频面试题(10月最新版)
前端·javascript·vue.js·面试
Highcharts.js10 小时前
选择合适的组合:如何打造数据可视化的“黄金组合”
javascript·信息可视化·highcharts·交互式图表开发
文火冰糖的硅基工坊11 小时前
[嵌入式系统-146]:五次工业革命对应的机器人形态的演进、主要功能的演进以及操作系统的演进
前端·网络·人工智能·嵌入式硬件·机器人
2401_8370885011 小时前
ResponseEntity - Spring框架的“标准回复模板“
java·前端·spring
yaoganjili11 小时前
用 Tinymce 打造智能写作
前端
angelQ11 小时前
Vue 3 中 ref 获取 scrollHeight 属性为 undefined 问题定位
前端·javascript
Dontla11 小时前
(临时解决)Chrome调试避免跳入第三方源码(设置Blackbox Scripts、将目录添加到忽略列表、向忽略列表添加脚本)
前端·chrome
我的div丢了肿么办11 小时前
js函数声明和函数表达式的理解
前端·javascript·vue.js
AAA阿giao11 小时前
JavaScript 对象字面量与代理模式:用“胡巴送花”讲透面向对象与设计思想
javascript