vue3
文章平均质量分 62
学习vue3的博客, 有问题请指导
无名H
这个作者很懒,什么都没留下…
展开
-
vue3从精通到入门23:定义全局变量
在vue2中,我们知道vue2.x是使用Vue.prototype.$xxxx=xxx来定义全局变量, 比如定义一个全局的工具函数。在vue3中我们无法使用this,提供了globalProperties;进行定义全局变量原创 2024-04-15 13:26:28 · 1172 阅读 · 0 评论 -
vue3从精通到入门22:自定义 Hooks
自定义 Hooks 就是将可重用的逻辑抽象到一个函数中,这样你可以在不同的组件中重复使用这些逻辑,而不必重复编写相同的代码。原创 2024-04-11 16:57:10 · 622 阅读 · 0 评论 -
vue3从精通到入门21:自定义指令directive
自定义指令directive是一种扩展HTML标签能力的机制。通过自定义指令,开发者可以直接在模板中使用指令名,并为其提供相应的逻辑。这些指令在Vue应用程序中扮演着重要角色,允许开发者执行一些低级DOM操作或访问元素状态原创 2024-04-11 16:09:04 · 879 阅读 · 0 评论 -
vue3从精通到入门20:v-model使用
v-model 的工作方式有所改变,它现在基于 modelValue 作为 prop 和 update:modelValue 作为事件。这使得 v-model 在自定义组件中更加灵活和可配置。下面是一个自定义输入框组件的例子,它使用 v-model 进行双向数据绑定:});原创 2024-04-10 17:20:47 · 521 阅读 · 0 评论 -
vue3从精通到入门19:事件总线Event Bus
我们在中讲解了组件的基本传参方式,但是显示场景中,会遇到复杂的情况。但是官方文档并没有直接推荐或提及事件总线(Event Bus)作为一种组件间通信的官方方式。这是因为事件总线可能会引入全局状态管理的问题,使得应用的状态难以追踪和理解,尤其是在大型项目中。然而,在某些小规模的项目或特定的场景中,事件总线仍然可以作为一种简单快速的通信手段。原创 2024-04-10 16:25:52 · 1245 阅读 · 1 评论 -
vue3从精通到入门18:依赖注入Provide / Inject
provide 和 inject 是一对用于实现依赖注入的 API。provide 选项允许父组件向其所有子组件提供一个依赖,无论组件层次结构有多深,只要在其后代组件中使用 inject 选项,就可以访问到这个依赖。原创 2024-04-09 10:35:48 · 453 阅读 · 0 评论 -
vue3从精通到入门17:内置组件之Transition和TransitionGroup
Transition和TransitionGroup是一个内置组件,它用于在元素或组件的插入、更新和移除时应用过渡效果。Vue 3 的组件提供了一个声明式的方式来处理这些过渡效果,使开发者能够更容易地添加动画到他们的 Vue 应用中。原创 2024-04-09 10:20:56 · 936 阅读 · 0 评论 -
vue3从精通到入门16:内置组件之Teleport
vue3中的Teleport是一个特别强大的特性,它允许开发者将组件的子组件“传送”到DOM中的任意位置,而不仅仅是它们的直接父级内部。这种灵活性在处理需要从视觉上从原始位置移动到其他位置的用户界面元素时显得尤为有用,比如模态框、弹出菜单、提示框等。原创 2024-04-08 07:15:00 · 412 阅读 · 0 评论 -
vue3从精通到入门15:内置组件之Suspense
Suspense是一个内置组件,它允许你在组件加载时显示一个备用内容(fallback content),直到组件真正渲染完成。这对于处理异步组件加载特别有用,可以提供更好的用户体验,防止用户看到未完成的界面或空白的加载状态。我们了解Suspense之前,先了解下什么是异步依赖和异步组件。原创 2024-04-08 01:15:00 · 333 阅读 · 0 评论 -
vue3从精通到入门14:内置组件之KeepAlive
keepalive是一个内置组件,它可以缓存不活动的组件实例,而不是销毁它们。当组件在内被切换时,它的激活和停用状态会被相应地触发,而不是被重新创建或销毁。这对于性能优化和保持组件状态非常有用,特别是在组件之间频繁切换的场景中。原创 2024-04-07 15:04:44 · 491 阅读 · 0 评论 -
vue3从精通到入门13:组件的传参方式
组件传参主要通过 props、emits、slots、provide/inject 以及 setup 函数中的 context 来实现。当使用语法时,传参方式会更加简洁和直观。原创 2024-04-07 00:14:45 · 1255 阅读 · 0 评论 -
vue3从精通到入门12:vue3的生命周期
onBeforeMount、onMounted、onBeforeUpdate、onUpdated 和 onUnmounted 生命周期钩子,它们分别在组件的不同生命周期阶段被调用。这些函数允许你在组件的不同状态下执行特定的逻辑原创 2024-04-03 16:06:49 · 1386 阅读 · 0 评论 -
vue3从精通到入门11:高级侦听器watchEffect
watchEffect是一个强大的工具,它简化了对多个响应式依赖的监听,并提供了对异步操作和副作用清理的支持。当你不确定要监听哪些具体依赖项,或者需要执行初始副作用操作时,是一个很好的选择。然而,如果你需要更细粒度地控制依赖项的变化,或者需要更多的选项来定制侦听器行为,那么watch函数可能更适合你的需求。原创 2024-04-03 15:37:56 · 668 阅读 · 0 评论 -
vue3从精通到入门10:侦听器watch
watch是一个用于观察和响应 Vue 组件中响应式数据变化的工具。当组件中的某个响应式数据发生变化时,watch可以帮助你执行一些特定的操作或副作用(side effects),比如更新其他数据、执行异步请求、调用方法等。原创 2024-04-02 10:57:09 · 762 阅读 · 0 评论 -
vue3从精通到入门9:计算属性computed
在 Vue 3 中,computed是一个用于创建计算属性的工具,它基于组件的响应式依赖进行复杂的计算,并返回一个新的响应式引用。计算属性是 Vue 的一个核心概念,它提供了一种声明式的方式来执行基于其依赖的响应式数据的计算。原创 2024-04-02 10:39:22 · 1033 阅读 · 0 评论 -
vue3从精通到入门8:reactive的使用
reactive是 Vue 3 响应式系统中的核心 API 之一,它用于将一个普通的 JavaScript 对象转换为响应式对象。当这个对象的属性发生变化时,Vue 3 能够自动追踪并通知所有依赖这个属性的组件进行更新。原创 2024-04-01 13:40:30 · 636 阅读 · 0 评论 -
vue3从精通到入门7:ref系列
Vue 3 的 Ref 是一个集合,包括多个与响应式引用相关的功能,这些功能共同构成了 Vue 3 响应式系统的重要组成部分。这些功能包括 ref、shallowRef、toRefs、customRef\原创 2024-04-01 13:07:06 · 714 阅读 · 0 评论 -
vue3从精通到入门6:v-memo指令
v-memo是一个用于优化组件渲染性能的指令。它允许你根据某个条件来缓存组件的虚拟 DOM 树,从而在条件没有变化时避免不必要的重新渲染。这对于那些接收大量 props 且渲染成本较高的组件来说非常有用。原创 2024-03-28 17:43:40 · 1041 阅读 · 0 评论 -
vue3从精通到入门5:模板语法与指令
Vue 3 的模板语法和指令与 Vue 2 相比,大部分内容仍然是相同的,但是有一些新的改进和优化。原创 2024-03-28 17:32:48 · 549 阅读 · 0 评论 -
vue3从精通到入门4:diff算法的实现
Vue 3 的 diff 算法相较于 Vue 2 有了一些改进和优化,主要是为了应对更复杂的组件结构和更高的性能需求。:首先,比较新旧列表的头节点(即第一个节点)。如果它们相同(基于 key 判断),则复用该节点,并移动两个列表的头指针到下一个节点。:然后,比较新旧列表的尾节点(即最后一个节点)。如果它们相同,也复用该节点,并移动两个列表的尾指针到前一个节点。:如果头头比较和尾尾比较都没有找到可复用的节点,Vue 会尝试在旧列表中查找与新节点匹配的节点。如果找到了,则移动该节点到正确的位置;原创 2024-04-15 14:18:18 · 559 阅读 · 1 评论 -
vue3从精通到入门3:patch函数源码实现方式
注释节点在虚拟 DOM 中主要用于标记某些特殊的位置或状态,但它们并不直接映射到真实的 DOM 注释节点。在 Vue 3 中,注释节点主要用于内部优化和特定功能的实现,例如用于标记 v-if 指令的条件分支或插槽的边界。函数的主要任务是确保组件实例在更新过程中保持正确的状态,并处理组件的挂载、更新或卸载。函数的主要任务是确保元素节点在更新过程中保持正确的状态,并更新其属性、子节点等。函数的解析,注意,实际的源码可能更复杂并包含更多的优化和边界情况处理。函数的主要任务是将静态节点挂载到实际的 DOM 中。原创 2024-03-26 13:29:43 · 1290 阅读 · 0 评论 -
vue3从精通到入门2:虚拟DOM的生成与真实DOM的转化
虚拟 DOM 是一个编程概念,它将真实的 DOM 树抽象为一个轻量级的 JavaScript 对象树。当应用状态发生变化时,Vue 会先比较新的虚拟 DOM 树和旧的虚拟 DOM 树之间的差异,然后只更新这些差异部分对应的真实 DOM,而不是重新渲染整个页面。虚拟 DOM 实现是 Vue 框架的核心部分之一,它负责在真实 DOM 之上抽象出一个轻量级的、可复用的 JavaScript 对象树,用于高效地更新视图。,我们的虚拟DOM是由render函数创建的。而我们如何将虚拟DOM转化成真实DOM呢?原创 2024-03-26 11:18:25 · 693 阅读 · 0 评论 -
vue3从精通到入门1: vue3特点以及与vue2的区别
Vue3的Composition API使得代码更加灵活和可重用,而Proxy的使用也使得响应式处理更加完善。Vue3是Vue框架的最新版本,相较于Vue2,它具有显著的特点和优势。:Vue3引入了Composition API,允许开发者通过函数的方式组织代码,提高了代码的灵活性和可重用性。:Vue3通过tree-shaking技术和优化打包方式,减小了包体积,提高了加载速度。:Vue3对TypeScript的支持更加完善,提供了更好的类型推断和类型定义。原创 2024-03-25 10:26:07 · 641 阅读 · 0 评论