![](https://img-blog.csdnimg.cn/direct/8f52940c801947df9e18eeb81e735b74.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue3
文章平均质量分 66
vue3 各个相关 组合式api,以及实用项目示例
刺客-Andy
轻用其芒,动即有伤,是为凶器;深藏若拙,临机取决,是为利器。
展开
-
vue3 学习教程第二十九节 (vue3 事件循环之nextTick)
在处理大量数据时,Vue.js 可能会变得有点慢,因为它需要时间来处理所有的数据并更新DOM。在这种情况下,你可能想要使用 nextTick() 来分批处理数据,以便给浏览器一些时间来更新DOM。在这种情况下,你可以使用 nextTick() 来确保你的代码在DOM更新后执行。在这种情况下,你可以使用 nextTick() 来确保你的代码在DOM更新后执行。然后,在下一个的事件循环“tick”中,Vue 刷新队列并执行实际 (已去重的) 工作。简单的理解是,当数据更新了,在dom中渲染后,自动执行函数。原创 2024-05-13 23:16:48 · 331 阅读 · 0 评论 -
vue3学习教程第四十一节 (pinia可持续化的应用)即页面刷新依然可以保持原有状态
pinia 中数据可持续化、结合前端本地缓存,vue3中使用pinia 将数据状态可持续化实现方案,注意事项。原创 2024-06-18 22:33:51 · 281 阅读 · 0 评论 -
vue3学习教程第四十节(pinia的用法注意事项解构store)
vue3 组合式API 中pinia的使用以及注意事项,解构获取 store 中数据,state、actions、getters 的应用原创 2024-06-18 22:25:07 · 491 阅读 · 0 评论 -
vue3学习教程第三十九节(TS中的高级类型,分类以及使用注意事项)
前言:为什么需要使用高级类型,正常的类型不能满足日常的业务需求,对于复杂的数据结构、函数签名、类型转换,我们需要使用高级类型来处理,常用的高级类型包含以下几种:常用的类型定义:基本类型: 像 number、string、boolean 这样的基本类型,它们表示简单的数据。对象类型: 可以使用对象字面量、接口、类等定义对象类型。数组和元组: 具有内置的数组类型和元组类型,用于处理集合数据。函数类型: 支持函数类型,包括参数类型和返回值类型。是通过 & 符号,将多个类型或者方法合并为一个类型使用于对象合原创 2024-06-12 22:20:15 · 383 阅读 · 0 评论 -
vue3第三十八节(TS 之 class 类实现及使用)
TypeScript 中类的实现与应用,使用注意事项原创 2024-06-07 10:38:39 · 583 阅读 · 0 评论 -
vue3第三十七节(自定义插件之自定义指令)防重指令
vue 中全局自定义指令使用,自定义插件编写原创 2024-06-07 10:22:20 · 281 阅读 · 0 评论 -
vue3学习教程第三十六节(自定义插件)
插件 (Plugins) 是一种能为Vue添加全局功能的工具代码。主要应用于以下四个方面1、通过和注册一到多个全局组件或自定义指令。2、通过使一个资源可被注入进整个应用。3、向中添加一些全局实例属性或方法4、一个可能上述三种都包含了的功能库 (例如vue-router。原创 2024-05-30 21:53:41 · 504 阅读 · 1 评论 -
vue3学习教程第三十四节(TS 之 interface 与 type 的异同)
vue3 组合式API使用 TS时,interface与type的使用注意事项以及差异原创 2024-05-23 22:17:20 · 559 阅读 · 0 评论 -
vue3学习教程第三十三节(TS 之 computed watch)
vue3 中计算属性 computed 与 监听函数 watch 的 ts写法原创 2024-05-23 22:02:27 · 361 阅读 · 0 评论 -
vue3学习教程第三十二节(TS 之 ref reactive defineProps)
时候,编译模板会自动根据script 中定义的数据类型而推断出属性的类型(当没有声明属性类型时候):在使用时候类型定义要与调用的方法保持一致,不然会导致对应的属性 没有该方法而报错;由于string 类型的属性是没有 toFixed() 方法的,故报错,如下图。类型声明或者调用 ref时传入一个泛型参数 来覆盖推断类型。创建的响应式,只能是对象类型,不能是基本类型;vue3 文件中 当我们在。指定复杂类型时候,通过。原创 2024-05-19 22:53:26 · 689 阅读 · 1 评论 -
vue3第三十一节(vue3中定义局部样式,以及样式穿透)
选择器的末尾(编译后的生成的css语句)加一个当前组件的data属性选择器(如[data-v-123])来私有化样式。,然后,给CSS选择器额外添加一个对应的属性选择器来选择该组件中dom,这种做法使得样式只作用于含有该属性的。c、如果组件内部包含有其他组件,只会给其他组件的最外层标签加上当前组件的data属性。而样式的穿透 多用于在项目自定义修改第三方 UI库的样式,用于满足本身项目的需要;会给一个组件中的所有dom添加了一个独一无二的动态属性。转译实现的),达到样式私有化模块化的目的。原创 2024-05-16 22:15:22 · 386 阅读 · 0 评论 -
vue3第三十节(vue3 vite中使用sass)
是一种CSS预处理器,它扩展了CSS的功能,提供了更高级的语法和特性,例如变量、嵌套、混合、继承和颜色功能等,这些特性可以帮助开发者更高效地管理和维护样式表。Sass语法是基于缩进(缩进花括号)的,它与传统的CSS语法类似,但添加了一些额外的规则和语法结构。Sass代码需要编译成CSS代码才能在浏览器中呈现。原创 2024-05-16 22:02:09 · 697 阅读 · 0 评论 -
vue3 学习教程第二十八节 (vue3 事件循环之JS事件循环)
事件循环就是消息队列,是浏览器渲染主线程的工作方式;过去将消息队列,简单的分为宏任务和微任务两种队列,而对于现在复杂多变的浏览器环境,显然这种处理方式已经不能满足使用,取而代之的是一种更加灵活多变的处理方式;W3C给出的解释是:每个任务有不同的类型,相同类型的任务会被放入同一个执行队列中,不同的任务可以隶属于不同的队列,不同的任务队列有不同的执行优先级,在一次事件循环中,浏览器自行决定取哪一个任务队列,但是浏览器必须有一个微任务队列,并且微任务队列中的任务执行级别最高,优先执行微任务;宏任务。原创 2024-05-13 22:29:48 · 807 阅读 · 0 评论 -
vue3 学习教程第二十七节 (vue3性能提升分别做了那些)
vue3 性能提升优化主要在哪些方面,vue3解决了vue2哪些问题原创 2024-05-07 22:20:03 · 290 阅读 · 0 评论 -
vue3学习教程第二十六节(Hooks 封装注意事项)
vue3 中自定义Hooks 函数详解,Hooks函数的使用注意事项,封装功能复用原创 2024-05-07 21:41:59 · 870 阅读 · 0 评论 -
vue3学习教程第二十五节(h()函数的应用)
vue3 中 h() 渲染函数的使用方法注意事项,特别是对于高度动态复杂渲染逻辑,值得学习使用原创 2024-04-26 22:35:18 · 884 阅读 · 0 评论 -
vue3学习教程第二十四节(JSX用法)
vue3中JSX的使用及注意事项,自定义组件,插值语法,条件渲染等,以及与template模板语法的差异原创 2024-04-25 22:48:22 · 574 阅读 · 0 评论 -
vue3学习教程第二十三节(全局属性方法应用)
vue3中全局方法使用,provide | inject 依赖注入法,globalProperties全局属性对象原创 2024-04-25 21:20:07 · 304 阅读 · 1 评论 -
vue3学习教程第二十二节(defineOptions用途)
vue3中新增加的 defineOptions() 用于设置父子组件属性的透传,以及设置组件的name属性原创 2024-04-19 21:12:47 · 1429 阅读 · 1 评论 -
vue3学习教程第二十一节(新增编译宏defineExpose)
vue3 中新增编译宏 defineExpose() 用于父子组件之间通讯,子组件通过defineExpose()抛出可以让,父组件链式调用子组件中的属性方法原创 2024-04-17 21:38:23 · 342 阅读 · 0 评论 -
vue3学习教程第二十节(新增编译宏defineModel)
vue3中新增编译宏 defineModel(),使用注意事项,解决父子组件之间数据双向绑定原创 2024-04-17 21:17:33 · 1224 阅读 · 0 评论 -
vue3第十九节(编译宏defineProps与defineEmits)用法注意事项
vue 中如何使用 defineProps() 和 defineEmits()编译宏,以及对应的注意事项原创 2024-04-15 22:19:52 · 497 阅读 · 0 评论 -
vue3学习教程第十八节(diff算法)
vue 项目中diff的用途,以及vue3项目相比较 vue2中diff做了那些优化提升,及vue3新增加的特性,使得vue3加载更快、编译更快、算法的效率提升更高原创 2024-04-11 23:50:19 · 656 阅读 · 1 评论 -
vue3学习教程第十七节(特殊属性key,is,ref)
vue 中特殊属性 key、is、ref 的作用以及用途,使用注意事项原创 2024-04-09 22:51:40 · 428 阅读 · 0 评论 -
vue3学习教程第十六节(keep-alive 内置组件)
keep-alive是vue中的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM;keep-alive 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们原创 2024-04-09 21:39:12 · 599 阅读 · 0 评论 -
vue3学习教程第十五节(Suepense)
suepense是先渲染的默认插槽中的内容,而在默认插槽渲染的进程中,如果遇见异步加载的组件或数据,则会渲染。提供了更平滑的解决方案,使UI加载更加流畅,有助于用户体验的提升,避免了加载过程中的空白或闪烁问题。插槽中的 加载中 数据会自动消失,进而渲染为默认插槽中的数据;包裹这些组件,直到所有需要的数据加载完成后再渲染。可以提供一个加载中状态,告诉用户内容正在加载中。使用,实现路由级别的懒加载,优化应用的启动速度。可以处理组件加载过程中的各种状态,提升应用性能。可以等待数据加载完成之后,再进行组件的渲染。原创 2024-04-07 21:45:34 · 328 阅读 · 0 评论 -
vue3第十四节 Teleport 内置组件介绍
内置组件teleport 的使用作用,主要用于将指定的组件或者元素传送到指定的位置原创 2024-04-06 12:57:59 · 453 阅读 · 0 评论 -
vue3学习教程第十三节(组件之间传参通讯:props/$emit/$on/provide/inject/$attrs/$parent/pinia)父子传参、子向父传参
vue3项目中组件之间传参,事件触发:常用的六中方式:props 、$emit、$on、provide、inject、$attrs、$parent、pinia、defineExpose原创 2024-04-01 21:19:01 · 709 阅读 · 0 评论 -
vue3学习教程第十二节(组件的使用与类型)
vue2、vue3中组件的类型,以及组件的注意事项,特别是递归组件的使用,动态组件的用法,全局组件、局部组件各有自己的优点原创 2024-03-28 22:48:26 · 1119 阅读 · 3 评论 -
vue3学习教程第十一节(依赖注入:provide/inject父子传参)
vue 项目中,组件直接的通讯之依赖注入:provide/inject;全局依赖注入,父子祖孙之间通讯原创 2024-03-25 23:00:26 · 944 阅读 · 0 评论 -
vue3学习教程第十节(插槽v-slot)父子传参
vue3 项目中 插槽使用,匿名插槽、具名插槽、作用域插槽(v-slot=“{text}”)插槽用法原创 2024-03-24 22:14:22 · 763 阅读 · 0 评论 -
vue3学习教程第九节(新加指令 v-pre/v-once/v-memo/v-cloak )
vue3中新添加指令如: v-pre/v-once/v-memo/v-cloak原创 2024-03-20 17:28:59 · 592 阅读 · 0 评论 -
vue3学习教程第八节(自定义指令 directive)
vue3 项目中自定义指令 directive,组件内自定义指令,全局自定义指令,防重指令原创 2024-03-19 21:27:23 · 501 阅读 · 0 评论 -
vue3学习教程第七节其他常用api
vue3项目中常用api、如:readonly()、isReadonly()、shallowReadonly()、isProxy()、toRaw()、markRaw()原创 2024-03-18 21:09:51 · 383 阅读 · 0 评论 -
vue3学习教程第六节(vue3 中 computed watch watchEffect)
vue 项目中 computed() 、watch() 、watchEffect()的使用以及注意事项原创 2024-03-15 21:49:18 · 575 阅读 · 0 评论 -
vue3学习教程第五节(reactive 及其相关)
vue3中响应式api的使用,以及注意事项 reactive()、 ref()、toRefs()、toRef()、isReactive()、 shallowReactive()使用原创 2024-03-13 22:05:22 · 676 阅读 · 2 评论 -
vue3学习教程第四节(ref以及ref相关api)
vue3 中ref以及ref相关内容,isRef 、unref、shallowRef、triggerRef、customRef原创 2024-03-12 22:07:25 · 971 阅读 · 0 评论 -
vue3学习教程第三节(v-model 执行原理)
vue 中 v-model执行原理以及使用注意事项说明原创 2024-02-27 22:45:18 · 1098 阅读 · 1 评论 -
vue3学习教程第二节(使用vite 创建vue3项目)
使用vite创建vue3项目,原创 2024-02-26 22:43:08 · 256 阅读 · 0 评论 -
vue3学习教程 第一节 实现原理
vue3第一节 、vue3实现原理以及vue2与vue3的异同优点原创 2024-02-20 23:37:23 · 670 阅读 · 0 评论