vue3
文章平均质量分 79
王大可996
一入编程深似海,久坐屏幕思纷飞。无尽代码如波涛,bug浪花千百寻。编程路漫漫,且行且思考,浩渺知识洋,唯学不尽止。
展开
-
vue3-pinia使用(末尾有彩蛋)
Pinia 是 Vue 的专属状态管理库,它允许你跨组件或页面共享状态。之前用的是 vuex,后面 vue 官方团队不维护了,推荐使用 piniaStore 是用 defineStore() 定义的它的第一个参数要求是一个独一无二的名字// 你可以任意命名 `defineStore()` 的返回值,但最好使用 store 的名字,同时以 `use` 开头且以 `Store` 结尾。// (比如 `useUserStore`,`useCartStore`,`useProductStore`)原创 2024-03-29 22:32:33 · 1201 阅读 · 0 评论 -
vue3-动画技巧
Vue 提供了 <Transition> 和 <TransitionGroup> 组件来处理元素进入、离开和列表顺序变化的过渡效果。但除此之外,还有许多其他制作网页动画的方式在 Vue 应用中也适用。这里我们会探讨一些额外的技巧。原创 2024-02-19 23:18:19 · 738 阅读 · 0 评论 -
vue3-渲染机制
Vue 编译器自动地会提升这部分 vnode 创建函数到这个模板的渲染函数之外,并在每次渲染时都使用这份相同的 vnode,渲染器知道新旧 vnode 在这部分是完全相同的,所以会完全跳过对它们的差异比对。如果我们有两份虚拟 DOM 树,渲染器将会有比较地遍历它们,找出它们之间的区别,并应用这其中的变化到真实的 DOM 上。举例来说,包含多个根节点的模板被表示为一个片段 (fragment),大多数情况下,我们可以确定其顺序是永远不变的,所以这部分信息就可以提供给运行时作为一个更新类型标记。原创 2024-02-18 22:24:24 · 1027 阅读 · 2 评论 -
vue3-深入响应式系统
这个术语在今天的各种编程讨论中经常出现,但人们说它的时候究竟是想表达什么意思呢?本质上,响应性是一种可以使我们声明式地处理变化的编程范式。一个经常被拿来当作典型例子的用例即是 Excel 表格:这里单元格 A2 中的值是通过公式 = A0 + A1 来定义的 (你可以在 A2 上点击来查看或编辑该公式),因此最终得到的值为 3,正如所料。但如果你试着更改 A0 或 A1,你会注意到 A2 也随即自动更新了。而 JavaScript 默认并不是这样的。原创 2024-02-17 11:18:06 · 1253 阅读 · 0 评论 -
vue3-组合式 API
组合式 API (Composition API) 是一系列 API 的集合,使我们可以使用函数而不是声明选项的方式书写 Vue 组件。它是一个概括性的术语,涵盖了以下方面的 API:响应式 API:例如 ref() 和 reactive(),使我们可以直接创建响应式状态、计算属性和侦听器。生命周期钩子:例如 onMounted() 和 onUnmounted(),使我们可以在组件各个生命周期阶段添加逻辑。原创 2024-02-16 20:19:31 · 1380 阅读 · 1 评论 -
vue3-使用 Vue 的多种方式
如果你的后端框架已经渲染了大部分的 HTML,或者你的前端逻辑并不复杂,不需要构建步骤,这是最简单的使用 Vue 的方式。测试工具 SPA 一般要求后端提供 API 数据接口,但你也可以将 Vue 和如 Inertia.js (https://inertiajs.com/)之类的解决方案搭配使用,在保留侧重服务端的开发模型的同时获得 SPA 的益处。这需要更多的前期 JS 加载和激活成本,但后续的导航将更快,因为它只需要部分地更新页面内容,而无需重新加载整个页面。否则,多页 SSG 将是更好的选择。原创 2024-02-15 18:54:13 · 1024 阅读 · 0 评论 -
vue3-生产部署-性能优化
如果你的用例对页面加载性能很敏感,请避免将其部署为纯客户端的 SPA,而是让服务器直接发送包含用户想要查看的内容的 HTML 代码。Vue 的响应性系统默认是深度的。需要提醒的是,只减少几个组件实例对于性能不会有明显的改善,所以如果一个用于抽象的组件在应用中只会渲染几次,就不用操心去优化它了。通过适当的代码分割,页面加载时需要的功能可以立即下载,而额外的块只在需要时才加载,从而提高性能。当部署到生产环境中时,我们应该移除所有未使用的、仅用于开发环境的代码分支,来获得更小的包体积和更好的性能。原创 2024-02-14 14:57:11 · 1435 阅读 · 0 评论 -
vue3-应用规模化-路由和状态
客户端 vs. 服务端路由服务端路由指的是服务器根据用户访问的 URL 路径返回不同的响应结果。当我们在一个传统的服务端渲染的 web 应用中点击一个链接时,浏览器会从服务端获得全新的 HTML,然后重新加载整个页面。然而,在单页面应用中,客户端的 JavaScript 可以拦截页面的跳转请求,动态获取新的数据,然后在无需重新加载的情况下更新当前页面。这样通常可以带来更顺滑的用户体验,尤其是在更偏向“应用”的场景下,因为这类场景下用户通常会在很长的一段时间中做出多次交互。在这类单页应用中,“路由原创 2024-02-13 10:20:15 · 1065 阅读 · 0 评论 -
vue3-应用规模化-工具链
如果因为某些原因,在有构建步骤时,你仍需要浏览器内的模板编译,你可以更改构建工具配置,将 vue 改为相应的版本 vue/dist/vue.esm-bundler.js。不过只推荐在你已经有一套基于 Jest 的测试集、且想要迁移到基于 Vite 的开发配置时使用,因为 Vitest 也能够提供类似的功能,且后者与 Vite 的集成更方便高效。Vue 的浏览器开发者插件使我们可以浏览一个 Vue 应用的组件树,查看各个组件的状态,追踪状态管理的事件,还可以进行组件性能分析。原创 2024-02-12 17:38:30 · 1014 阅读 · 0 评论 -
vue3-应用规模化-单文件组件
单文件组件 简单来说就是 一个个 .vue 结尾的文件,它改变了我们书写前端代码的方式。将一个逻辑功能或者模板封装在一个文件里面,方便其他组件调用。用多了也就习惯了。。。原创 2024-02-11 18:28:06 · 1467 阅读 · 0 评论 -
vue3-内置组件-Suspense
这意味着如果组件关系链上有一个 ,那么这个异步组件就会被当作这个 的一个异步依赖。在挂起状态期间,展示的是后备内容。 组件自身目前还不提供错误处理,不过你可以使用 errorCaptured 选项或者 onErrorCaptured() 钩子,在使用到 的父组件中捕获和处理异步错误。有了 组件后,我们就可以在等待整个多层级组件树中的各个异步依赖获取结果时,在顶层展示出加载中或加载失败的状态。原创 2024-02-09 17:03:51 · 2173 阅读 · 0 评论 -
vue3-内置组件-Teleport
这类场景最常见的例子就是全屏的模态框。对于此类场景,多个 <Teleport> 组件可以将其内容挂载在同一个目标元素上,而顺序就是简单的顺次追加,后挂载的将排在目标元素下更后面的位置上。有时我们可能会遇到这样的场景:一个组件模板的一部分在逻辑上从属于该组件,但从整个应用视图的角度来看,它在 DOM 中应该被渲染在整个 Vue 应用外部的其他地方。这个组件中有一个 <button> 按钮来触发打开模态框,和一个 class 名为 .modal 的 <div>,它包含了模态框的内容和一个用来关闭的按钮。原创 2024-02-08 23:36:30 · 575 阅读 · 0 评论 -
vue3-内置组件-KeepAlive
KeepAlive> 的行为在指定了 max 后类似一个 LRU 缓存:如果缓存的实例数量即将超过指定的那个最大数量,则最久没有被访问的缓存实例将被销毁,以便为新的实例腾出空间。在下面的例子中,你会看到两个有状态的 组件——A 有一个计数器, 而 B 有一个通过 v-model 同步 input 框输入内容的文字展示。 是一个内置组件,它的功能是在多个组件间动态切换时缓存被移除的组件实例。这两个钩子不仅适用于 缓存的根组件,也适用于缓存树中的后代组件。原创 2024-02-07 23:08:25 · 1159 阅读 · 0 评论 -
vue3-内置组件-TransitionGroup
通过在 JavaScript 钩子中读取元素的 data attribute,我们可以实现带渐进延迟的列表动画。上面的示例有一些明显的缺陷:当某一项被插入或移除时,它周围的元素会立即发生“跳跃”而不是平稳地移动。是一个内置组件,用于对 v-for 列表中的元素或组件的插入、移除和顺序改变添加动画效果。CSS 过渡 class 会被应用在列表内的元素上,而不是容器元素上。列表中的每个元素都必须有一个独一无二的 key attribute。过渡模式在这里不可用,因为我们不再是在互斥的元素之间进行切换。原创 2024-02-06 22:56:35 · 794 阅读 · 0 评论 -
vue3-内置组件-Transition
你也可以向 传递以下的 props 来指定自定义的过渡 class:leave-to-class 你传入的这些 class 会覆盖相应阶段的默认 class 名。这个功能在你想要在 Vue 的动画机制下集成其他的第三方 CSS 动画库时非常有用,比如 Animate.css:安装 animate.css 动画库,(已安装的可以忽略)-- 假设你已经在页面中引入了 Animate.css -->原创 2024-02-05 22:50:36 · 2072 阅读 · 0 评论 -
vue3-插件
为了更好地理解如何构建 Vue.js 插件,我们可以试着写一个简单的 i18n (国际化 (Internationalization) 的缩写) 插件。我们的 $translate 函数会接收一个例如 greetings.hello 的字符串,在用户提供的翻译字典中查找,并返回翻译得到的值。请谨慎使用全局属性,如果在整个应用中使用不同插件注入的太多全局属性,很容易让应用变得难以理解和维护。让我们从设置插件对象开始。现在,插件用户就可以在他们的组件中以 i18n 为 key 注入并访问插件的选项对象了。原创 2024-02-04 22:42:27 · 744 阅读 · 0 评论 -
vue3-自定义指令
vue 除了内置的制指令(v-model v-show 等)之外,还允许我们注册自定义的指令。vue 复用代码的方式:组件:主要是构建模块。组合式函数:侧重有状态的逻辑。自定义指令:主要是为了重用涉及普通元素的底层 DOM 访问的逻辑。定义:一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。钩子函数会接收到指令所绑定元素作为其参数。示例:input 元素自动获取焦点// 在模板中启用 v-focus</script><template></div>效果。原创 2024-02-03 23:12:30 · 1045 阅读 · 0 评论 -
vue3-逻辑复用
无状态逻辑的函数_:它在接收一些输入后立刻返回所期望的输出。比如 时间格式化的函数。有状态逻辑的函数: 有状态逻辑负责管理会随时间而变化的状态。比如 跟踪当前鼠标在页面中的位置。在 Vue 应用的概念中,“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。一个简单的例子是跟踪当前鼠标在页面中的位置。在实际应用中,也可能是像触摸手势或与数据库的连接状态这样的更复杂的逻辑。原创 2024-02-02 21:16:29 · 1039 阅读 · 0 评论 -
vue3-深入组件-依赖注入
如果提供的值是一个 ref,注入进来的会是该 ref 对象,而不会自动解包为其内部的值。若使用 props 则必须将其沿着组件链逐级传递下去,这会非常麻烦,所以被称为“prop 逐级透传”,显然是我们希望尽量避免的情况。任何后代的组件树,无论层级有多深,都可以注入由父组件提供给整条链路的依赖。后代组件会用注入名来查找期望注入的值。一个组件可以多次调用 provide(),使用不同的注入名,注入不同的依赖值。当提供 / 注入响应式的数据时,建议尽可能将任何对响应式状态的变更都保持在供给方组件中。原创 2024-02-01 23:26:30 · 1318 阅读 · 0 评论 -
vue3-深入组件-插槽
具名作用域插槽的工作方式也是类似的,插槽 props 可以作为 v-slot 指令的值被访问到:v-slot:name="slotProps"。 元素是一个插槽出口 (slot outlet),,标示了父元素提供的插槽内容 (slot content) 将在哪里被渲染。当一个组件同时接收默认插槽和具名插槽时,所有位于顶级的非 节点都被隐式地视为默认插槽的内容。其他非字符串的值会触发警告。插槽内容可以访问到父组件的数据作用域,因为插槽内容本身是在父组件模板中定义的。原创 2024-01-31 23:37:19 · 801 阅读 · 0 评论 -
vue3-深入组件-透传属性
template Fallthrough attribute: {{ $attrs }} 这个 $attrs 对象包含了除组件所声明的 props 和 emits 之外的所有其他 attribute,例如 class,style,v-on 监听器等等。需要注意的是,虽然这里的 attrs 对象总是反映为最新的透传 attribute,但它并不是响应式的 (考虑到性能因素)。如果一个子组件的根元素已经有了 class 或 style attribute,它会和从父组件上继承的值合并。原创 2024-01-29 22:58:17 · 979 阅读 · 0 评论 -
vue3-深入组件-组件 v-model
/子组件})</script><template></div></style>//父组件</script><template></div></style>要根据修饰符有条件地调整值的读取/写入方式,我们可以将get和set选项传递给defineModel().这两个选项接收模型引用的 get/set 值,并应返回转换后的值。原创 2024-01-26 23:31:48 · 1267 阅读 · 0 评论 -
vue3-深入组件-事件
camelCase(小驼峰命名形式)比如:changeStatus在父组件中使用 kebab-case 形式使用和原生 DOM 事件不一样,组件触发的事件没有冒泡机制。你只能监听直接子组件触发的事件。平级组件或是跨越多层嵌套的组件间通信应使用一个外部的事件总线或是使用一个全局状态管理方案。原创 2024-01-25 22:41:50 · 476 阅读 · 0 评论 -
vue3-深入组件-组件注册和props更多细节
每次父组件更新后,所有的子组件中的 props 都会被更新到最新值,这意味着你不应该在子组件中去更改一个 prop。对象形式的 props 声明不仅可以一定程度上作为组件的文档,而且如果其他开发者在使用你的组件时传递了错误的类型,也会在浏览器控制台中抛出警告。所有的 props 都遵循着单向绑定原则,props 因父组件的更新而变化,自然地将新的状态向下流往子组件,而不会逆向传递。在 main.ts 中。全局注册的组件可以在此应用的任意组件的模板中使用,所有的子组件也可以使用全局注册的组件。原创 2024-01-24 22:53:45 · 1484 阅读 · 1 评论 -
vue3-组件基础
你点击了我 {{ count }} 下.原创 2024-01-22 23:26:13 · 773 阅读 · 0 评论 -
vue3-生命周期
可以很容易的看出 vue3 的钩子函数基本是再 vue2 的基础上加了一个 on,但也有两个钩子函数发生了变化。从创建->初始化数据->编译模版->挂载实例到 DOM->数据变更后更新 DOM ->卸载组件。在各个周期运行时,会执行钩子函数,让开发者有机会在特定阶段运行自己的代码。尤大的介绍是 mount 比 Destroy 更形象,也和 beforeMount 相对应。生命周期简单说就是 vue 实例从创建到销毁的过程。vue 组件实例都有自己的一个生命周期。原创 2024-01-21 16:24:41 · 626 阅读 · 0 评论 -
vue3-模版引用
使用了 <script setup> 的组件是默认私有的,一个父组件无法访问到一个使用了 <script setup> 的子组件中的任何东西,除非子组件在其中通过 defineExpose 宏显式暴露。ref 属性 允许我们在一个特定的 DOM 元素或子组件实例被挂载后,获得对它的直接引用。一个子组件使用的是选项式 API ,父组件对子组件的每一个属性和方法都有完全的访问权。除了使用字符串作为名字,还可以使用一个函数,函数会在每次组件更新时都被调用。应该注意的是,ref 数组并不保证与源数组相同的顺序。原创 2024-01-20 23:32:18 · 1571 阅读 · 2 评论 -
vue3-侦听器
在 setup() 或 <script setup> 中用同步语句创建的侦听器,会自动绑定到宿主组件实例上,并且会在宿主组件卸载时自动停止。如果你需要侦听一个嵌套数据结构中的几个属性,watchEffect() 可能会比深度侦听器更有效,因为它将只跟踪回调中被使用到的属性,而不是递归地跟踪所有的属性。一个关键点是,侦听器必须用同步语句创建:如果用异步回调创建一个侦听器,那么它不会绑定到当前组件上,你必须手动停止它,以防内存泄漏。默认情况下,用户创建的侦听器回调,都会在 Vue 组件更新之前被调用。原创 2024-01-19 21:51:14 · 403 阅读 · 0 评论 -
vue3-表单输入绑定
v-model 会忽略任何表单元素上初始的 value、checked 或 selected attribute。它将始终将当前绑定的 JavaScript 状态视为数据的正确来源。这里 toggle 属性的值会在选中时被设为 'yes',取消选择时设为 'no'。true-value 和 false-value 是 Vue 特有的 attributes,仅支持和 v-model 配套使用。v-model 还可以用于各种不同类型的输入元素。它会根据所使用的元素自动使用对应的 DOM 属性和事件组合。原创 2024-01-18 20:38:01 · 670 阅读 · 0 评论 -
vue3-事件处理
与 keyup 事件一起使用时,该按键必须在事件发出时处于按下状态。在处理事件时调用 event.preventDefault() 或 event.stopPropagation() 是很常见的。在上面的例子中,仅会在 $event.key 为 'PageDown' 时调用事件处理。v-on 提供了事件修饰符。.exact 修饰符允许控制触发一个事件所需的确定组合的系统按键修饰符。使用修饰符时需要注意调用顺序,因为相关代码是以相同的顺序生成的。方法事件处理器:一个指向组件上定义的方法的属性名或是路径。原创 2024-01-17 22:44:17 · 517 阅读 · 0 评论 -
vue3-列表渲染
Vue 实现了一些巧妙的方法来最大化对 DOM 元素的重用,因此用另一个包含部分重叠对象的数组来做替换,仍会是一种非常高效的操作。当数据项的顺序改变时,Vue 不会随之移动 DOM 元素的顺序,而是就地更新每个元素,确保它们在原本指定的索引位置上渲染。推荐在任何可行的时候为 v-for 提供一个 key attribute,除非所迭代的 DOM 内容非常简单 (例如:不包含组件或有状态的 DOM 元素),或者你想有意采用默认行为来提高性能。对于多层嵌套的 v-for,作用域的工作方式和函数的作用域很类似。原创 2024-01-16 22:35:24 · 1179 阅读 · 0 评论 -
vue3-条件渲染
在这种情况下我们可以在一个 <template> 元素上使用 v-if,这只是一个不可见的包装器元素,最后渲染的结果并不会包含这个 <template> 元素。和 v-else 类似,一个使用 v-else-if 的元素必须紧跟在一个 v-if 或一个 v-else-if 元素后面。一个 v-else 元素必须跟在一个 v-if 或者 v-else-if 元素后面,否则它将不会被识别。v-else-if 提供的是相应于 v-if 的“else if 区块”。v-if 指令用于条件性地渲染一块内容。原创 2024-01-15 23:54:10 · 565 阅读 · 0 评论 -
vue3-类与样式绑定
当你在 :style 中使用了需要浏览器特殊前缀的 CSS 属性时,Vue 会自动为他们加上相应的前缀。如果浏览器不支持某个属性,那么将尝试加上各个浏览器特殊前缀,以找到哪一个是被支持的。对于只有一个根元素的组件,当你使用了 class attribute 时,这些 class 会被添加到根元素上并与该元素上已有的 class 合并。同样的,如果样式对象需要更复杂的逻辑,也可以使用返回样式对象的计算属性。绑定的对象并不一定需要写成内联字面量的形式,也可以直接绑定一个对象。Class 的绑定也是同样的效果。原创 2024-01-14 23:27:23 · 472 阅读 · 1 评论 -
vue3-计算属性
想象一下我们有一个非常耗性能的计算属性 list,需要循环一个巨大的数组并做许多计算逻辑,并且可能也有其他计算属性依赖于 list。计算属性值会基于其响应式依赖被缓存,一个计算属性仅会在其响应式依赖更新时才重新计算。一个计算属性的声明中描述的是如何根据其他值派生一个值。更改快照是没有意义的,因此计算属性的返回值应该被视为只读的,并且永远不应该被更改——应该更新它所依赖的源状态以触发新的计算。计算属性的 getter 应只做计算而没有任何其他的副作用,这一点非常重要,请务必牢记。计算属性默认是只读的。原创 2024-01-13 22:40:56 · 2461 阅读 · 1 评论 -
vue3-响应式基础之reactive
reactive() 将深层地转换对象:当访问嵌套对象时,它们也会被 reactive() 包装。不能替换整个对象:由于 Vue 的响应式跟踪是通过属性访问实现的,因此我们必须始终保持对响应式对象的相同引用。不同的是,Vue 能够拦截对响应式对象所有属性的访问和修改,以便进行依赖追踪和触发更新。作为 reactive 对象的属性 一个 ref 会在作为响应式对象的属性被访问或修改时自动解包。reactive() 返回的是一个原始对象的 Proxy,它和原始对象是不相等的。这个规则对嵌套对象也适用。原创 2024-01-12 23:27:04 · 954 阅读 · 1 评论 -
vue3-响应式基础之ref
注意,在模板中使用 ref 时,我们不需要附加 .value。为了方便起见,当在模板中使用时,ref 会自动解包 (有一些注意事项)。幸运的是,我们可以通过使用单文件组件 (SFC) 来避免这种情况。Vue 会在“next tick”更新周期中缓冲所有状态的修改,以确保不管你进行了多少次状态修改,每个组件都只会被更新一次。Ref 可以持有任何类型的值,包括深层嵌套的对象、数组或者 JavaScript 内置的数据结构,比如 Map。在模板渲染上下文中,只有顶级的 ref 属性才会被解包。原创 2024-01-11 23:26:13 · 1241 阅读 · 0 评论 -
vue3 模版语法
没有显式包含在列表中的全局对象将不能在模板内表达式中访问,例如用户附加在 window 上的属性。指令 attribute 的期望值为一个 JavaScript 表达式 (除了少数几个例外,即之后要讨论到的 v-for、v-on 和 v-slot)。动态参数表达式因为某些字符的缘故有一些语法限制,比如空格和引号,在 HTML attribute 名称中都是不合法的。其他非字符串的值会触发警告。Vue 使用一种基于 HTML 的模板语法,使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。原创 2024-01-10 23:32:05 · 873 阅读 · 1 评论 -
Vue3简介以及项目创建
它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。这种形式更加自由,也需要你对 Vue 的响应式系统有更深的理解才能高效使用。相应的,它的灵活性也使得组织和重用逻辑的模式变得更加强大。组合式 API 的核心思想是直接在函数作用域内定义响应式状态变量,并将从多个函数中得到的状态组合起来处理复杂问题。Vue 的组件可以按两种不同的风格书写:选项式 API 和组合式 API。Node.js 版本大于等于18.0。根据提示进行安装即可。原创 2024-01-09 16:57:02 · 347 阅读 · 0 评论