- 博客(8)
- 收藏
- 关注
原创 Vue 2 和 Vue 3 的虚拟 DOM对比
虚拟 DOM(Virtual DOM)是 Vue 的核心概念之一,它通过在内存中构建轻量级的 JavaScript 对象(即 VNode)来描述真实 DOM 结构,从而优化渲染性能。Vue 3 在虚拟 DOM 的实现上做了许多优化,使其比 Vue 2 更高效。优化 Diff 过程,比 Vue 2 的全量递归比对更高效,特别适合大型应用和高频更新的场景。:将静态节点(不会变化的 DOM)提升到渲染函数外部,避免重复创建和比对。每次数据变化时,递归比对整个 VNode 树,即使某些节点是静态的。
2025-05-20 16:50:46
2312
原创 watch 与 watchEffect 的区别详解
在 Vue 3 的 Composition API 中,watch和都是用于响应式数据监听的 API,但它们在使用方式和适用场景上有显著区别。这是面试中经常被问到的 Vue 3 核心知识点。
2025-05-16 15:40:35
3115
原创 Pinia 面试常见问题及详解
Pinia 作为 Vue 官方推荐的状态管理库,已成为前端面试中的热门话题。以下是 Pinia 相关的常见面试问题及其详细解答,帮助你全面准备面试。
2025-05-15 09:59:16
703
原创 深入理解 Pinia:每个属性的含义与实际应用场景
就像超市的店员,专门负责商品上架(修改数据)、回答咨询(业务逻辑)等工作。就像超市的货架,所有顾客(组件)都能看到和拿取同样的商品(数据)。就像收银台的计价器,自动帮你计算商品总价,而不需要你手动一个个加。├── getters (商品标签/计算器) - 计算派生数据。当非直接关联的组件需要共享数据时(比如兄弟组件、远房组件)底层组件直接从 store 获取所需数据,中间组件无需参与。顶层组件获取数据后,要经过多层中间组件传递到底层组件。├── state (货架上的商品) - 存储数据。
2025-05-15 09:36:15
1522
原创 provide 和 inject 的全面解析
/ 默认值 'light'provide('updateData', (newVal) => { /* 受控更新 */ });(如 Form 和 FormItem 通信):异步组件在解析时祖先组件可能未挂载。// FormItem 组件。(如主题、语言、用户权限)定义全局值(优先级最低)确保祖先组件同步初始化。解决跨层级组件通信问题。// Form 组件。提供的值(就近原则)
2025-05-14 16:37:44
943
原创 toRef 和 toRefs 的区别与使用场景
toRef和toRefs都是 Vue 3 的 Composition API 中用于处理响应式引用的工具函数,但它们有不同的用途和行为。:为响应式对象的某个属性创建一个 ref 引用,保持对该属性的响应式连接。当你需要从响应式对象中提取单个属性并保持其响应性时当你想要保持与源对象的属性同步时count: 0,})// 创建一个 ref,连接到 state.count// 修改 ref 会更新原始对象// 修改原始对象也会更新 ref。
2025-05-13 09:51:42
832
原创 ref()/reactive()响应式数据是如何声明
ref()// 基本类型const count = ref(0) // 数字const msg = ref('Hello Baby') // 字符串// 引用类型(对象/数组)
2025-05-12 10:09:35
474
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人
RSS订阅