随笔分类 - vue / vue3
摘要：前言 最近在用 vue3 封装 element 的表单时遇到的一个小问题，这里就简单记录一下过程。话不多说直接上代码！！！ 正文 部分核心代码 import { ref, defineComponent, renderSlot, type PropType, type SetupContext }
阅读全文
摘要：前言 isRef()、unRef()、toRef()、toRefs()这几个函数他们各自都有什么功能，在什么场景下应用以及有哪些细节是我们没有注意到的，我们一起来看一下，为了方便大家理解和对照，这里以官方文档说明 + 解析的方式讲解。 isRef() 检查某个值是否为 ref。 类型 ts func
阅读全文
摘要：在 Vue3 中，有许多与响应式相关的函数，例如 toRef、toRefs、isRef、unref 等等。合理地使用这些函数可以在实际开发中大大提高效率。本文将详细介绍这些函数的用法，让在实际开发中知道应该使用哪些 API 并能够熟练地回答面试官的相关问题。 ref() 大家对于 ref 这个 AP
阅读全文
摘要：前言 vue3是基于 proxy 实现响应式的能力， 解决了vue2所遗留下来的一些问题，同时也正由于 proxy 的特性，也提高了运行时的性能 凡事有利有弊， proxy虽然无敌，但是他也有本身的局限，从而产生一些认为的弊端 原始值的响应式系统的实现 导致必须将他包装为一个对象， 通过 .valu
阅读全文
摘要：两个inject工具函数轻松解决严格注入和Hook 返回值透传问题！ 痛苦的经历 自从使用了Provide/Inject代码的组织方式更加灵活了，但是这个灵活性的增加伴随着代码容错性的降低。相信只要是真的在项目中引入Provide/Inject的同学，一定一定有过或者正在经历下面的状况： 😢 注入
阅读全文
摘要：表单Form是中后台频繁使用的组件，以下是一个基于arco design vue组件库封装的表单组件。 这个表单组件特点： 所有配置都是直接继承组件库组件的props，无需其他文档 可配置展开折叠 支持响应式布局 表单项支持动态隐藏 插槽支持，自定义扩展 组件库的良好支持，封装代码简洁优雅 plac
阅读全文
摘要：数据接口设计 type TreeItem = { value: string label: string children?: TreeItem[] } export type FormListItem = { // 栅格占据的列数 colSpan?: number // 表单元素特有的属性 pro
阅读全文
摘要：ref 和 reactive 是 Vue3 中用来实现数据响应式的 API 一般情况下，ref 定义基本数据类型，reactive 定义引用数据类型（喜欢用它来定义对象，不用它定义数组，原因后面讲） 理解的 ref 本质上是 reactive 的再封装 ref： 通过 Object.definePr
阅读全文
摘要：VUE3+VITE+TS 项目中的要点 使用 vue3+vite+ts 构建项目基础框架，配置代码运行环境,对项目进行模块化划分,并集成 element 组件库、axios 请求库； 利用 axios 拦截器实现了权限校验,对系统的登入权限进行控制,避免了无效请求； 利用 vue-router 路由
阅读全文
摘要：什么是插槽 简单来说就是子组件中的提供给父组件使用的一个坑位，用 表示，父组件可以在这个坑位中填充任何模板代码然后子组件中就会被替换成这些内容。比如一个最简单插槽例子 <!-- 父组件 --> <template> <div> <Child>Hello Juejin</Child> </div> <
阅读全文
