vue3
文章平均质量分 54
**之火
希望一直深耕钱端领域,但也喜欢涉猎其他计算机编程领域,钱端幸福三要素:悠闲,寡欲,融入自然。
展开
-
为什么vue3项目中推荐使用const,而不是let语法
const 声明的变量是只读的,这意味着它们的值不能被重新赋值。这有助于防止在组件的整个生命周期内不小心修改状态,从而使得状态管理更加安全。:使用 const 声明的对象或数组是单例的,这意味着它们在声明时只被初始化一次,之后不会被重新创建。这有助于确保组件状态的一致性,特别是在使用响应式系统时。:Vue 3 使用了 Composition API,其中的 reactive、ref 和 reactiveRef 等函数创建了响应式变量。原创 2024-07-22 09:07:34 · 487 阅读 · 0 评论 -
Vue3 之 Pinia 服务端渲染 (SSR) (九)
Pinia是一个用于Vue.js的状态管理库,它支持服务端渲染(SSR)。在SSR中,页面在服务器端渲染成HTML字符串,然后发送到客户端,从而提升首屏加载速度和SEO优化。Pinia通过其设计使得在SSR环境下也能轻松使用和管理状态。原创 2024-06-16 17:42:30 · 461 阅读 · 0 评论 -
Vue3 之 Pinia 核心概念(八)
但与 Vuex 不同的是,在 Pinia 中,mutations 和 actions 被合并为一个概念,即 actions。在 Pinia 中,一个 Store 可以很容易地访问另一个 Store 的状态和方法。如果你在使用 TypeScript,Pinia 提供了强大的类型支持,确保你的代码是类型安全的。首先,你需要在你的主入口文件(如 main.js 或 main.ts)中创建 Pinia 实例,并使用它创建你的 Store。:这是你的应用程序的状态,是一个响应式的对象。为 store 增加新的方法。原创 2024-06-15 11:50:00 · 643 阅读 · 0 评论 -
Vue3 自定义渲染器 API createRenderer()(七)
这是一个对象,其中定义了一组与节点(Node)相关的操作。这些操作通常与特定的渲染目标相对应,例如在 DOM 渲染中,这些操作会处理 DOM 节点的插入、删除、更新等。当 Vue 检测到组件的属性(props)或 DOM 元素的属性发生变化时,这个函数会被调用。将给定的 Vue 节点(通常是一个 Vue 组件的实例)渲染为字符串。这同样在 SSR 中有用,特别是在处理大型应用程序时,可以使用流来更有效地处理输出。是一个布尔值,表示是否要尝试与服务端渲染(SSR)的输出进行“水合”(hydrate)。原创 2024-06-12 09:15:23 · 670 阅读 · 1 评论 -
Vue3 服务端渲染 API(六)
pipeToNodeWritable() 是一个有用的 API,它允许你将 Vue 组件的渲染输出直接“管道”到一个 Node.js 可写流(Writable stream)中。这在与现有的 Node.js 流处理系统(如 HTTP 响应)集成时特别有用,因为它允许你更有效地处理大型响应体,而无需将整个响应加载到内存中。pipeToNodeWritable() API 的存在主要是为了提供一种更明确的方式来表达这种操作,但在实际使用中,你很少需要直接使用它,除非你有特定的理由或需求。原创 2024-06-11 22:59:10 · 870 阅读 · 0 评论 -
Vue3 渲染函数 API(五)
用自定义指令包装一个现有的 vnode。第二个参数是自定义指令数组。每个自定义指令也可以表示为 [Directive, value, argument, modifiers] 形式的数组。如果不需要,可以省略数组的尾元素。原创 2024-06-10 21:47:16 · 747 阅读 · 0 评论 -
Vue3 组合式 API:依赖注入(四)
provide() 函数是用于依赖注入的一个关键部分。这个函数允许你在组件树中提供一个值或对象,使得任何子组件(无论层级多深)都能够通过 inject() 函数来访问这些值。inject() 函数是依赖注入机制的一部分,允许组件从其祖先组件中“注入”数据或功能。这与 provide() 函数配合使用,后者负责在祖先组件中提供数据或功能。原创 2024-06-09 13:18:01 · 510 阅读 · 1 评论 -
Vue3 组合式 API:生命周期钩子(三)
onMounted() 会在组件挂载到 DOM 后立即调用,此时 DOM 已经渲染完毕,可以进行相关的 DOM 操作或发起网络请求。当这个钩子被调用时,组件已经完成了其响应式状态的设置,但还没有创建 DOM 节点。若组件实例是 <KeepAlive> 缓存树的一部分,当组件被插入到 DOM 中时调用。组件实例是 缓存树的一部分,当组件从 DOM 中被移除时调用。在组件因为响应式状态变更而更新其 DOM 树之后调用。当这个钩子被调用时,组件实例依然还保有全部的功能。当响应式依赖的变更触发了组件渲染时调用。原创 2024-06-07 17:20:44 · 556 阅读 · 0 评论 -
Vue3 响应式API:高级函数(二)
在你的代码中,你可以为每个 effectScope 创建一个唯一的标识符,并在创建作用域时将其存储在某个全局或局部的可访问位置。然后,你可以通过该标识符来获取相应的作用域。原创 2024-06-07 09:27:22 · 1069 阅读 · 0 评论 -
Vue3 响应式 API:工具函数(一)
在某些情况下,你可能需要编写一些通用逻辑或函数,这些逻辑或函数需要处理不同类型的响应式数据(如 ref 和 reactive 创建的数据)。原创 2024-06-06 09:35:15 · 870 阅读 · 0 评论 -
vue3之动态路由
如果你决定在导航守卫内部添加或删除路由,你不应该调用 router.replace(),而是通过返回新的位置来触发重定向。原创 2024-03-25 09:33:39 · 459 阅读 · 0 评论 -
vue3 之 Pinia
【代码】vue3 之 Pinia。原创 2024-03-26 18:08:30 · 197 阅读 · 0 评论 -
vue3之带参数的动态路由
/ 引入 Vue 和 Vue Router// 引入组件path: '/',},path: '/user/:id', // 这里是带参数的动态路由routes});原创 2024-03-16 22:43:08 · 426 阅读 · 0 评论 -
vue3之声明式和编程式导航
在组件内部,可以使用router属性访问路由,例如this如果使用组合式 API,你可以通过调用 useRouter() 来访问路由器,导入后赋值给变量就行了,如:const router = useRouter();原创 2024-03-19 09:06:13 · 552 阅读 · 0 评论 -
vue3 之 Pinia 扩展插件
【代码】vue3 之 Pinia 扩展插件。原创 2024-03-29 09:21:05 · 392 阅读 · 0 评论 -
使用vue3编写一个插件
使用vue3编写一个插件。原创 2024-03-16 08:00:00 · 363 阅读 · 0 评论 -
vue3之RouterView插槽和过渡动效
【代码】vue3之RouterView插槽和过渡动效。原创 2024-03-22 09:22:21 · 853 阅读 · 0 评论 -
Vue 3 之 嵌套路由
在用Vue 3 构建复杂的单页面应用(SPA)时,需要创建出多层次的页面结构,这时候嵌套路由允许你在一个路由内部定义另一个路由,这非常有用。原创 2024-03-18 09:15:38 · 453 阅读 · 0 评论 -
vue3 导航守卫
Vue 3 的导航守卫与 Vue 2 相比,在 API 和使用方式上并没有太大的变化,但 Vue 3 的响应式系统和 Composition API 为导航守卫提供了更多的灵活性。原创 2024-03-20 21:55:27 · 481 阅读 · 0 评论 -
vue3之路由导航故障
通常一个导航守卫函数中会发生三件事:1.通过调用 return false 中断了这次导航2.通过返回一个新的位置,重定向到其他地方 (例如,return ‘/login’)3.抛出了一个 Error。原创 2024-03-23 23:09:49 · 336 阅读 · 0 评论 -
Vue3学习笔记
vue3:在初始化的时候会给每一个虚拟节点添加一个patchFlags,是一种优化的标识,只会比较patchFlags发生变化的节点,进行视图更新,而对于patchFlags没有变化的元素作静态标记,在渲染的时候直接使用。作用域插槽使用方式不同:vue2中在父组件中使用slot-scope=“data"从子组件获取数据,vue3中在父组件中使用 #data 或者 #default=”{data}"获取。具名插槽使用方式不同:vue2使用slot=‘’,vue3使用v-slot:‘’原创 2023-08-25 23:41:54 · 419 阅读 · 0 评论 -
vue3 的defineEmits()高级用法
在 Vue 3 中,defineEmits 是用于定义组件可以触发的自定义事件的函数。它是 Vue 3 的 Composition API 的一部分,用于替代 Vue 2 选项式 API 中的 emits 选项。原创 2024-03-07 09:27:33 · 1041 阅读 · 0 评论 -
详解vue3的组件 v-model
通过 modelValue 作为 prop 和 update:modelValue 作为事件来实现的。这意味着你可以自定义 v-model 的行为和绑定的属性。v-model 是 Vue.js 中一个非常实用的指令,它简化了双向数据绑定的过程。原创 2024-03-08 09:55:56 · 667 阅读 · 0 评论 -
Vue 2和Vue 3透传Attributes特性
【代码】Vue 2和Vue 3透传Attributes特性。原创 2024-03-09 16:57:15 · 928 阅读 · 0 评论 -
vue3插槽 Slots
Vue插槽(Slot)的本质是。插槽允许开发者在封装组件时,把不确定的、希望由用户指定的部分定义为插槽,可以将其视为组件封装期间为用户预留的内容占位符。插槽的显示与否以及具体如何显示,是由父组件来决定的,而插槽显示的位置则由子组件自身决定。官方给了一个理解插槽的例子:和avaScript 函数作类比,其概念是类似。${:父组件模板中的表达式只能访问父组件的作用域;子组件模板中的表达式只能访问子组件的作用域。这和 JavaScript 的词法作用域规则是一致的。原创 2024-03-09 23:15:37 · 520 阅读 · 0 评论 -
vue3依赖注入(provide 和 inject)
依赖注入(provide 和 inject),解决Prop 逐级透传问题。跨多组件转递参数,避免使用Prop 逐级透传。原创 2024-03-12 09:08:10 · 564 阅读 · 0 评论 -
vue3之异步组件(defineAsyncComponent)
Suspense>-- 具有深层异步依赖的组件 -->-- 异步组件加载没成功之前,在 #fallback 插槽中显示 “正在加载中” -->Loading...//或者...-- 主要内容 -->-- 加载中状态 -->正在加载...常常会将 和 、 等组件结合。要保证这些组件都能正常工作,嵌套的顺序非常重要。原创 2024-03-13 09:29:01 · 1640 阅读 · 0 评论 -
vue3之组合式函数
【代码】vue3之组合式函数。原创 2024-03-14 09:32:21 · 364 阅读 · 0 评论 -
vue3之自定义指令
除了 Vue 内置的一系列指令 (比如 v-model 或 v-show) 之外,Vue 还允许你注册自定义的指令。原创 2024-03-15 09:14:11 · 816 阅读 · 0 评论 -
vue3之Prop特性注意点
vue3之Prop特性注意点。原创 2024-03-06 09:45:51 · 243 阅读 · 0 评论