vue3学习笔记
文章平均质量分 75
边敲边学
gxw_viva
有问题可以加我微信,微信号: Hex-VivaLaVida。
展开
-
vue3 hook的理解?如何封装一个hook?。
Vue3 官方文档是这样定义组合式函数的。,一个利用 Vue 的组合式 API 来封装和复用具有状态逻辑的函数。在开发中,我们经常会发现一些可以重复利用的代码段,于是我们将其封装成函数以供调用。这类函数包括工具函数,但是又不止工具函数,因为我们可能也会封装一些重复的业务逻辑。以往,在前端原生开发中,我们封装的这些函数都是“无状态”的。原创 2024-03-22 10:02:46 · 1791 阅读 · 0 评论 -
axios的原理是什么,实现简易版本axios。
请求,支持丰富的配置,支持。原创 2024-03-01 09:46:00 · 117 阅读 · 0 评论 -
vue3 TransitionGroup内置组件的使用
是一个内置组件,用于对v-for列表中的元素或组件的插入、移除和顺序改变添加动画效果。原创 2024-02-27 13:49:15 · 207 阅读 · 0 评论 -
vue3 Transition内置组件的使用。
你也可以向你传入的这些 class 会覆盖相应阶段的默认 class 名。这个功能在你想要在 Vue 的动画机制下集成其他的第三方 CSS 动画库时非常有用,比如原创 2024-02-27 13:42:12 · 777 阅读 · 0 评论 -
vue3 KeepAlive的使用。
是一个内置组件,它的功能是在多个组件间动态切换时缓存被移除的组件实例。默认情况下,一个组件实例在被替换掉后会被销毁。这会导致它丢失其中所有已变化的状态——当这个组件再一次被显示时,会创建一个只带有初始状态的新实例。在下面的例子中,你会看到两个有状态的组件——A 有一个计数器,而 B 有一个通过v-model同步 input 框输入内容的文字展示。尝试先更改一下任意一个组件的状态,然后切走,再切回来:你会发现在切回来之后,之前已更改的状态都被重置了。原创 2024-02-27 11:13:20 · 624 阅读 · 0 评论 -
vue3 Teleport的使用及场景。
这类场景最常见的例子就是全屏的模态框。有时我们可能会遇到这样的场景:一个组件模板的一部分在逻辑上从属于该组件,但从整个应用视图的角度来看,它在 DOM 中应该被渲染在整个 Vue 应用外部的其他地方。:有时候你可能希望某个组件的内容在滚动时保持固定位置,这时可以使用 Teleport 将该组件的内容渲染到页面的某个固定位置,而不受滚动容器的影响。:你可以使用 Teleport 将全局提示的内容渲染到页面的特定位置,比如右上角,而不受组件所在层级的影响。,它包含了模态框的内容和一个用来关闭的按钮。原创 2024-02-27 10:59:06 · 1216 阅读 · 0 评论 -
用Vue3.0 如何实现一个 自定义Modal?
内置组件进行包裹,其相当于传送门,将里面的内容传送至。主体内容需要灵活,所以可以是字符串,也可以是一段。该有的内容(遮罩层、标题、内容、底部按钮)都实现了。组件内部是如何处理「确定」「取消」事件的,既然是。最常见的则是通过调用字符串和默认插槽的形式。的类型不同,对应显示不同得到内容。调用作为一个插件,所以都放在。的方式获得组件实例,然后挂载到。的形式使父组件监听,还可通过。因为 Modal 会被。的形式进行组件的调用。的主体显示内容大致如下。的形式调用全局 API。的形式,我们还可通过。原创 2024-02-26 17:56:36 · 326 阅读 · 1 评论 -
vue3 Suspense的作用及使用场景。
Vue 3 引入的Suspense组件用于处理异步组件的加载状态,使得开发者可以更优雅地处理组件加载时的等待状态和展示过渡效果。它主要用于异步组件和异步数据的获取,提供了一种新的方式来定义组件的加载状态,直到它的依赖项被解析完成。原创 2024-02-26 14:53:13 · 1073 阅读 · 1 评论 -
vue3 slots插槽的使用
在之前的章节中,我们已经了解到组件能够接收任意类型的 JavaScript 值作为 props,但组件要如何接收模板内容呢?在某些场景中,我们可能想要为子组件传递一些模板片段,让子组件在它们的组件中渲染这些片段。举例来说,这里有一个而元素是一个(slot outlet),标示了父元素提供的(slot content) 将在哪里被渲染。插槽内容可以是任意合法的模板内容,不局限于文本。原创 2024-02-26 09:51:14 · 910 阅读 · 1 评论 -
Vue 3.0中Treeshaking特性?
是一种通过清除多余代码方式来优化项目打包体积的技术,专业术语叫简单来讲,就是在保持代码运行结果不变的前提下,去除无用的代码如果把代码打包比作制作蛋糕,传统的方式是把鸡蛋(带壳)全部丢进去搅拌,然后放入烤箱,最后把(没有用的)蛋壳全部挑选并剔除出去而则是一开始就把有用的蛋白蛋黄(import)放入搅拌,最后直接作出蛋糕也就是说 ,其实是找出使用的代码在Vue2中,无论我们使用什么功能,它们最终都会出现在生产代码中。主要原因是Vue。原创 2024-02-21 10:14:47 · 379 阅读 · 0 评论 -
Vue要做权限管理该怎么做?控制到按钮级别的权限怎么做?
取得后端返回的菜单后,根据菜单与路由的对应关系,筛选出可访问的路由,通过。菜单跟路由耦合在一起,定义路由的时候还有添加菜单显示标题,图标之类的信息,而且路由不一定作为菜单显示,还要多加字段进行标识。路由方面,用户登录后只能看到自己有权访问的导航菜单,也只能访问自己有权访问的路由地址,否则将跳转。如果有嵌套路由,后端功能设计的时候,要注意添加相应的字段,前端拿到数据也要做相应的处理。加载所有的路由,如果路由很多,而用户并不是所有的路由都有权限访问,对性能会有影响。原创 2024-02-22 09:11:41 · 606 阅读 · 1 评论 -
Vue3.0里为什么要用 Proxy API 替代 defineProperty API ?
只能遍历对象属性进行劫持。Proxy直接可以劫持整个对象,并返回一个新对象,我们可以只操作新的对象达到响应式目的。Proxy可以直接监听数组的变化(pushshiftspliceProxy有多达13种拦截方法,不限于applyownKeyshas等等,这是不具备的正因为自身的缺陷,导致Vue2在实现响应式过程需要实现其他的方法辅助(如重写数组方法、增加额外setdelete方法)。// 数组重写});原创 2024-02-21 10:23:11 · 446 阅读 · 0 评论 -
vue3 reactive的使用及解析
Vue 3的reactive函数通过使用Proxy为JavaScript对象创建一个响应式的代理。这个代理可以拦截对象的基本操作,如读取和设置属性。Vue利用这些能力进行依赖收集和触发组件的重新渲染,从而实现了其响应式系统。这种方法提高了性能并允许Vue处理更复杂的响应式数据结构。这个源码解析给出了一个高层次的概述,Vue的响应式系统实际上包含更多的细节和优化。原创 2024-02-23 10:30:00 · 731 阅读 · 1 评论 -
vue3 watchEffect和watch的使用及区别
Vue 3中的是一个非常强大的响应式API,它允许开发者在响应式数据发生变化时自动运行一些副作用(side effects)。与Vue中的另一个APIwatch相似,但有一些关键区别和特点。下面我会详细解释的工作原理、使用方法以及与watch的比较。原创 2024-02-23 11:58:14 · 972 阅读 · 0 评论 -
vue3中defineComponent和defineAsyncComponent的区别及使用场景
是 Vue 3 中的一个函数,用于定义一个组件。它是 Vue 3 的组合式 API 的一部分,提供了一种更加灵活和组织化的方式来定义组件。在 Vue 2 中,我们通常使用一个对象来定义组件,而在 Vue 3 中,函数提供了更多的类型支持和更好的集成。原创 2024-02-23 16:07:27 · 2685 阅读 · 0 评论 -
vue3中provide和inject使用。
在Vue 3中,provide和injectAPI是一种非常强大的功能,用于在组件层级之间传递数据,特别是在处理深层嵌套组件时非常有用。它们允许开发者跨越多个组件层级直接传递数据,而不需要通过每个层级逐层传递props。原创 2024-02-23 15:13:04 · 526 阅读 · 0 评论 -
Vue3详解ref()用法
将传入参数的值包装为一个带 .value 属性的 ref 对象。ref 对象是可更改的,即可以为 .value 赋予新的值.我们都知道Proxy的代理目标必须是非原始值(Object),所以我们没有任何手段拦截对原始值的操作.vue3 中对。接受一个内部值,返回一个ref 对象,这个对象是响应式的、可更改的,且只有一个指向其内部值的属性 .value。当 ref 在模板中作为顶层属性被访问时,它们会被自动“解包”,所以不需要使用 .value。举例:一个包含对象类型值的 ref 可以响应式地替换整个对象。原创 2024-02-21 14:20:55 · 792 阅读 · 0 评论 -
vue3 toref和torefs的使用及区别
通过接收两个必传的参数(第一个是 reactive 对象, 第二个是要转换的 key ),返回一个 Ref 变量,在适当的时候也可以传递第三个参数,为该变量设置默认值。这一点和直接解构 Reactive 变量有非常大的不同,直接解构 Reactive 变量,得到的是一个普通的变量,不再具备响应性。先看这个转换单个字段的 toRef API ,了解了它的用法之后,再去看 toRefs 就很容易理解了。此时新数组的类型是 Ref[] ,不再是原来的 string[] 类型。原创 2024-02-22 09:37:28 · 1220 阅读 · 1 评论 -
vue2 el-upload结合v-viewer实现图片上传预览
废话不多说直接上代码,只写了图片预览部分,上传部分代码可以根据业务自己书写。原创 2024-02-22 15:42:53 · 182 阅读 · 1 评论