vue3
文章平均质量分 90
渐进式JavaScript 框架
TypeScript+组合式API+setup语法糖
fishmemory7sec
这个作者很懒,什么都没留下…
展开
-
vue3 组合式API defineEmits() 与 emits 组件选项
defineEmits() 和 emits组件选项在功能上都是用于声明组件可以向外触发的事件。它们的核心目的都是让组件明确地告知外界它能够发出哪些自定义事件,以此来规范组件间的通信。defineEmits()在 Vue 3 的组合式 API 中使用。emits组件选项 在Vue 2 及 Vue 3 的选项式 API 中使用。原创 2024-09-16 14:43:10 · 1309 阅读 · 0 评论 -
vue3 透传 Attributes
“透传 attribute”指的是传递给一个组件,却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器。当一个组件以单个元素为根作渲染时,透传的 attribute 会自动被添加到根元素上。最常见的例子就是 class、style 和 id。原创 2024-09-15 17:15:28 · 1149 阅读 · 0 评论 -
vue3 内置组件 <Suspense>
是一项实验性功能。它不一定会最终成为稳定功能,并且在稳定之前相关 API 也可能会发生变化。是一个内置组件,用来在组件树中协调对异步依赖的处理。它让我们可以在组件树上层等待下层的多个嵌套异步依赖项解析完成,并可以在等待时渲染一个加载状态。原创 2024-09-12 23:00:46 · 1296 阅读 · 0 评论 -
vue3 内置组件<Teleport>
将一个组件的模板内容渲染到指定的 DOM 节点位置,而不是在组件自身的挂载点。组件的参数说明:原创 2024-09-12 15:36:56 · 224 阅读 · 0 评论 -
vue3 响应式API customRef()
使用ref()定义响应式数据:</</</importfrom'vue';constref'hello'</使用Vue提供的默认ref()定义响应式数据,当数据发生变化时,Vue 的响应式系统会自动检测到变化,并立即更新相关的页面部分。现在,实现如下图所示的需求:当在输入框输入123时,输入结束1秒后,页面才更新。将输入框与inputValue进行双向绑定,当用户在输入框中输入数字1input框的数据瞬间就改变了,在页面上用作展示的也就更新了。使用ref()原创 2024-09-11 18:17:47 · 942 阅读 · 0 评论 -
vue3 响应式API toRaw() 和 markRaw()
toRaw()根据一个 Vue 创建的代理返回其原始对象。toRaw() 可以返回由 reactive()、readonly()、shallowReactive() 或者 shallowReadonly() 创建的代理对应的原始对象。原创 2024-09-11 16:29:17 · 340 阅读 · 0 评论 -
Vue3 响应式工具函数isRef()、unref()、isReactive()、isReadonly()、isProxy()
isRef():检查某个值是否为 ref。isRef函数接收一个参数,即要判断的值。如果该参数是由ref创建的响应式对象,则返回true;否则,返回false。原创 2024-09-10 15:20:19 · 761 阅读 · 0 评论 -
vue3 内置特殊元素<slot> 与 插槽 Slots
Vue 模板里的 元素会被编译到 JavaScript,因此不要与原生 元素进行混淆。 元素可以使用 name attribute 来指定插槽名。当没有指定 name 或者name="default"时,将会渲染默认插槽。传递给插槽元素的附加 attributes 将作为插槽 props,传递给父级中定义的作用域插槽。原创 2024-09-10 13:45:44 · 1255 阅读 · 0 评论 -
vue3 响应式 API:shallowRef()和shallowReactive()
shallowRef()是一个用于创建浅层响应式引用的函数。它创建一个响应式数据,但只对顶层属性进行响应式处理。shallowReactive()是一个用于创建浅层响应式对象的函数。shallowReactive()创建的响应式对象是浅层的:只有对象的直接属性是响应式的,对象内部的嵌套属性不是响应式的。原创 2024-09-06 18:08:34 · 1409 阅读 · 1 评论 -
vue3 响应式 API:readonly() 与 shallowReadonly()
readonly()是一个用于创建只读代理对象的函数。它接受一个对象 (不论是响应式还是普通的) 或是一个 ref,返回一个原值的只读代理。shallowReadonly() 是 readonly() 的浅层作用形式,是一个用于创建浅层只读代理对象的函数。原创 2024-09-06 16:49:54 · 377 阅读 · 0 评论 -
vue3 组件通信方式
vue3 组件通信方式父传子propsv-model$refs默认插槽、具名插槽、动态插槽子传父propsv-model$parent自定义事件作用域插槽祖传孙、孙传祖$attrsprovide、inject兄弟间、任意组件间Piniamitt原创 2024-09-04 21:05:07 · 1073 阅读 · 1 评论 -
Vue3 官方推荐状态管理库Pinia
Pinia 是 Vue 官方团队推荐代替Vuex的一款轻量级状态管理库,允许跨组件/页面共享状态。Pinia 旨在提供一种更简洁、更直观的方式来处理应用程序的状态。Pinia 充分利用了 Vue 3 的 Composition API。原创 2024-09-02 16:33:38 · 941 阅读 · 0 评论 -
Vue Router
Vue是一个典型的SPA单页面应用框架。SPA单页面是指网站只有一个html页面,所有的页面切换都只在这个html页面中完成。不同组件的切换全部交由路由来完成。Vue Router 是 Vue.js 官方的客户端路由解决方案。它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举。客户端路由的作用是在单页应用 (SPA) 中将浏览器的 URL 和用户看到的内容绑定起来。当用户在应用中浏览不同页面时,URL 会随之更新,但页面不需要从服务器重新加载。Vue Router 基原创 2024-08-28 23:19:40 · 1245 阅读 · 0 评论 -
vue3 自定义hooks(组合式函数)
自定义hooks 是Vue3 组合式函数的别称。在 Vue 应用的概念中,“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。原创 2024-08-26 17:38:30 · 1754 阅读 · 0 评论 -
vue3 生命周期钩子
在 Vue 3 中,可以在组件不同阶段的生命周期执行特定逻辑。生命周期整体分为四个阶段:创建、挂载、更新、卸载。原创 2024-08-24 21:18:48 · 894 阅读 · 0 评论 -
vue3 Props的用法(父传子)
在 Vue 3 中,Props(属性)用于在组件之间传递数据。原创 2024-08-23 21:24:36 · 1359 阅读 · 0 评论 -
vue3 语法糖<script setup>
当使用时,任何在声明的顶层的绑定 (包括变量,函数声明,以及 import 导入的内容) 都能在模板中直接使用:< template > < div > {{ count }} < button @click = " increment " > 点击count+1 < script setup > import {原创 2024-08-22 22:00:10 · 1661 阅读 · 0 评论 -
vue3 内置的特殊属性ref
Vue 3 中的数据绑定是通过模板语法实现的。开发者可以在模板中使用特殊的语法来绑定数据,例如使用双花括号{{}}来显示数据,或者使用v-bind指令来绑定属性。当数据发生变化时,Vue 会自动更新绑定的数据在模板中的显示,实现页面的自动更新。虽然 Vue 的响应式数据驱动模式非常强大,但有时直接访问底层 DOM 元素是必要的。原创 2024-08-21 21:00:29 · 1215 阅读 · 0 评论 -
vue3 响应式 API:watch()、watchEffect()
语法:watch(变量名, (newValue, oldValue) => {})监视时直接写变量名,其本质上监视的是.value。< template > < div > < div > count: {{ count }} </ div > < button @click = " addCount " > 点击 count+1 </ button > </ div > </ template > < script setup lang = " ts " > import {原创 2024-08-20 22:26:40 · 1171 阅读 · 0 评论 -
vue3 响应式 API:computed()
computed()接收一个 getter 函数或者一个包含 getter 和 setter 函数的对象作为参数,并返回一个基于原始响应式数据计算得到的新的响应式数据对象。计算属性的值会根据其依赖的响应式数据自动更新,当依赖的数据发生变化时,计算属性的值也会自动重新计算。原创 2024-08-19 18:25:12 · 724 阅读 · 0 评论 -
vue3响应式工具 toRefs() 和 toRef()
直接解构响应式对象的属性进行赋值给新的变量,会导致新变量失去响应式。当修改新变量的值时,不会触发原始响应式对象的更新,从而在模板中也不会有相应的视图更新。示例:原创 2024-08-18 23:43:37 · 1180 阅读 · 0 评论 -
vue3 响应式 API:ref() 和 reactive()
若需要一个基本类型的响应式数据,必须使用ref()。若需要一个响应式对象,层级不深,ref()、reactive()都可以。若需要一个响应式对象,且层级较深,推荐使用reactive()。原创 2024-08-18 19:48:01 · 1584 阅读 · 2 评论 -
vue3 组合式 API:setup()
setup() 函数是在组件实例创建之前执行的,它用于组合组件的逻辑,包括响应式数据、方法、计算属性、监听等。它接收两个参数:props 和 context,并返回一个对象,其中包含可以在组件模板中使用的属性和方法。原创 2024-08-17 21:04:51 · 1099 阅读 · 0 评论 -
创建vue3工程
注意:目前vue-cli已处于维护模式,官方推荐基于 Vite 创建项目。原创 2024-08-16 22:34:43 · 409 阅读 · 0 评论