訾博（ZiBo）的博客

在某些 JavaScript 或 TypeScript 项目中，可能会有大量使用 关键字的代码。当我们需要将这些代码迁移到其他框架（例如 Vue 3 的组合式 API）时，可能需要将 的用法改为 的形式。这种情况下，正则表达式替换将显得尤为高效。首先，确保你的 VS Code 已经安装并打开了需要进行替换的代码文件。你可以通过以下快捷键打开查找和替换面板：在查找输入框的右侧，你会看到一个带有“.*”的图标。点击这个图标以启用正则表达式功能。启用后，VS Code 将允许你使用正则表达式进行搜索和替换。

是 Vue3 提供的一个响应式 API，用于将对象的顶层属性设为只读。与readonly不同的是，只会影响对象的顶层属性，不会递归地使对象内部的属性也变为只读。是 Vue3 中一个非常实用的响应式 API，适用于需要部分只读状态的场景。通过将对象的顶层属性设为只读，可以有效防止误操作，同时允许内部属性的自由修改，提供了灵活性和性能优化的双重优势。希望本文能帮助你更好地理解和使用，提升你的 Vue3 开发体验。

在Vue3中，响应式系统是其核心特性之一，它允许我们轻松地管理和更新应用程序的状态。然而，有时我们需要排除某些对象，使其不被响应式系统追踪。markRaw()就是为此目的而设计的。本文将详细介绍markRaw()的作用、使用场景及最佳实践。markRaw()是Vue3中一个非常有用的工具，特别是在需要控制对象的响应式行为时。通过合理地使用markRaw()，我们可以避免不必要的性能开销和防止意外的状态变更，从而更好地管理应用程序的状态。希望本文能帮助你更好地理解和使用markRaw()

toRaw是Vue3中一个非常实用的高阶用法，能够帮助我们在特定场景下绕过响应式系统，从而优化性能或与外部库更好地集成。通过本文的介绍，希望读者能够更好地理解和应用toRaw，从而在实际项目中获得更多的灵活性和性能提升。

在Vue3中，响应式系统是其核心特性之一。是Vue3提供的一种高阶响应式API，它与reactive()类似，但有着显著的区别。本文将详细介绍的使用场景、基本用法、功能详解、最佳实践及案例，帮助读者更好地理解和应用这一特性。是Vue3中一个非常有用的高阶响应式API，适用于需要浅层响应和性能优化的场景。通过本文的介绍，读者应该能够理解的基本用法和功能，并在实际项目中灵活应用这一特性以提升性能和开发效率。希望这篇博客能帮助你更好地掌握Vue3的响应式系统，并在实际开发中获得更多的价值。

在 Vue3 中，响应式系统是其核心特性之一。是 Vue3 提供的一种高级工具，允许开发者创建自定义的ref对象。这些对象可以包含更复杂的依赖跟踪和更新逻辑，满足特定的业务需求。本文将详细介绍的使用场景、基本用法以及一些最佳实践。是 Vue3 中一个非常强大的工具，允许开发者根据自己的需求创建自定义的ref对象。通过合理使用，我们可以实现防抖、节流、异步更新等复杂的响应式逻辑，从而提高代码的灵活性和可维护性。希望本文能帮助你更好地理解和使用，为你的 Vue3 开发带来更多的便利和可能性。

在 Vue3 中，响应式系统是其核心特性之一。shallowRef是一种轻量级的响应式引用，它只对顶层属性进行响应式追踪，而不会递归地使其内部属性响应式。方法则允许我们在特定情况下强制触发对shallowRef内层属性的响应，从而提高灵活性。是 Vue3 中一个强大的工具，可以在使用shallowRef时提供更大的灵活性。通过合理使用triggerRef，我们可以在需要时手动控制响应式更新，从而在性能和响应式追踪之间取得平衡。

在 Vue 3 中，响应式系统是其核心特性之一。通过响应式系统，开发者可以轻松地管理和更新应用状态。然而，对于一些特殊场景，我们可能需要更细粒度的控制。这时，就派上用场了。本文将详细介绍的使用场景、基本使用、功能详解、最佳实践及案例，帮助读者更好地理解和应用这一高阶用法。shallowRef使用shallowRefuser: {age: 25},});在这个例子中，state对象的第一层属性是响应式的，但user对象的属性不会被深度转换为响应式。shallowRef。

Grid Layout Plus 以其丰富的特性和灵活的配置，为 Vue 3 开发者提供了一个强大的栅格布局解决方案。无论是构建复杂的仪表板、动态的网页布局还是响应式的移动应用，Grid Layout Plus 都能够提供必要的支持。通过其直观的拖拽和缩放功能，开发者可以快速构建出既美观又实用的用户界面。

VueHooks Plus 旨在简化 Vue 3 开发者的 Hook 使用过程。它提供了基础和高级的 Hook，让开发者能够以简洁的语法和易用的特性快速上手。无论你是 Vue 的新手还是老手，VueHooks Plus 都能帮助你轻松构建高性能的逻辑。VueHooks Plus 不仅仅是一个 Hooks 库，它是一个全面的解决方案，涵盖了从请求处理到状态管理，再到 DOM 操作和开发辅助的各个方面。通过插件化的设计和丰富的功能，VueHooks Plus 极大地提升了 Vue 3 开发的效率和体验。

文件是声明文件（Declaration Files），它们的作用是。vite 创建项目生成的原文件，未做任何更改！，以便 TypeScript 编译器。在 TypeScript 项目中，

首先，我们通过 Vue 的模板语法创建一个简单的卡片组件。在这里，我们使用了Element Plus的滚动条组件（el-scrollbar）来包裹我们的卡片。通过以上步骤，你已经成功创建了一个简单的Vue卡片组件，并为其添加了鼠标移入特效。这使得用户在浏览你的页面时能够获得更好的交互体验。在本篇博客中，我们将探讨如何使用 CSS 来实现卡片组件，并添加鼠标移入特效，使你的界面更具吸引力。语法为卡片组件添加样式，包括卡片布局、边框、阴影等。

类型“{}”上不存在属性“xxx”。ts(2339)

Vue 3的`h`函数（`createVNode`）是前端开发中一个强大的工具，用于创建虚拟DOM节点。虚拟DOM是Vue框架中的核心概念，通过它，我们可以更高效地更新页面内容。本文将深入探讨Vue 3的`h`函数及其用法。

Vue3 Hook 实践指南

在我们的日常开发中，获取项目的版本信息和环境变量是很常见的需求。尤其是在前后端分离的项目中，前端可能需要知道当前的环境（开发环境、测试环境还是生产环境），以便决定如何处理各种情况。

在Vue中，响应式是一种让数据变动自动更新到界面的机制。如果一个数据是响应式的，当它变化时，任何依赖于这个数据的部分都会自动更新。

易用、简洁且高效的http库。

UnoCSS 是一个轻量级、可扩展和零配置的 CSS 框架，旨在提供简洁、灵活且高效的样式开发体验。它遵循类似于 Tailwind CSS 的原则，通过使用类名来应用样式，从而提供快速而直观的样式编写方式。UnoCSS 的设计目标是提供最小化的样式，同时保持灵活性和可定制性。它提供了一组基础样式规则和常用的样式变体，如边框、背景、文字、布局等，可以轻松地在项目中使用。与其他 CSS 框架不同的是，UnoCSS 不包含任何默认主题或设计样式，这使得它非常适合定制化和与现有设计系统的集成。

Plop 是一个用于生成代码文件的可配置的脚手架工具。它可以帮助开发人员自动创建代码文件、模板和代码片段，从而提高开发效率。Plop 的工作原理是通过定义称为 “生成器”（generators）的脚本来生成代码文件。每个生成器定义了一组操作和模板，用于生成特定类型的文件或代码片段。当你运行 Plop 命令时，它会根据你的选择执行相应的生成器，并根据模板和操作的定义创建文件。

基于 Vue 3，面向设计师和开发者的组件库。

Sass 是一种 CSS 预处理器，它扩展了 CSS 的功能并提供了更强大的工具和语法来帮助开发者更高效地编写和管理样式表。SCSS 是基于 CSS 的语法，因此对于熟悉 CSS 的开发者来说，学习和使用 SCSS 相对较容易。它引入了一些新的概念和功能，如变量、嵌套规则、混合（Mixins）、继承（Inheritance）等，这些功能使得样式表更具模块化和可重用性。

Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。默认会将 store 中的所有字段都缓存，可以通过 paths 点符号路径数组指定要缓存的字段paths : [ 'user.name' ] , // 存储 user 对象的 name 属性 } ,

为 Vue.js 提供富有表现力、可配置的、方便的路由。

以 VITE_ 为前缀定义变量修改 src/vite-env.d.ts。

husky 的读音为 /ˈhʌski/Husky 是一个 Git Hook 工具，可以帮助我们在 Git 事件发生时自动运行脚本。Git Hook 是一种机制，它允许在 Git 执行操作时自动运行特定脚本，以执行自定义操作。使用 Husky，可以轻松地添加 Git Hooks，并在特定的 Git 事件（如提交代码）发生时执行自定义的脚本。例如，在提交代码之前自动运行代码格式化脚本或运行代码静态分析工具等。

ESLint 是一个静态代码分析工具,用于检查 JavaScript 代码的语法结构和查找程序错误。Prettier 是一个代码格式化工具,支持 JavaScript, TypeScript, CSS, HTML, JSON, GraphQL, Markdown 等各种语言。

Vite 创建 Vue-Ts 项目

Vue Router 路由跳转传参实践。

Vue3 使用 mitt 实现跨组件通信

Vue 3 子组件接受父组件传参数。

Vue 3 获取 DOM

Vue 3 全局注册属性与方法。

Vue 3 父子组件互调方法 - setup 语法糖写法文章目录Vue 3 父子组件互调方法 - setup 语法糖写法一、父组件调用子组件方法1、子组件2、父组件3、测试结果4、关于 defineExpose 的官方文档二、子组件调用父组件方法1、子组件2、父组件3、测试结果4、关于 defineEmits 的官方文档下面演示均为使用 setup 语法糖的情况！一、父组件调用子组件方法下面演示为使用 setup 语法糖的情况，值得注意的是子组件需要使用 defineExpose 对外暴露方法

1.19 动态路由1.19.1 概述添加路由到你的路由上通常是通过 routes 配置，但是在某些情况下，你可能想在应用程序已经运行的时候添加或删除路由。具有可扩展接口(如 Vue CLI UI )这样的应用程序可以使用它来扩展应用程序。1.19.2 添加路由动态路由主要通过两个函数实现。router.addRoute() 和 router.removeRoute()。它们只注册一个新的路由，也就是说，如果新增加的路由与当前位置相匹配，就需要你用 router.push() 或 router.re

1.18 等待导航结果*这个功能还是很有用的！1.18.1 概述当使用 router-link 组件时，Vue Router 会自动调用 router.push 来触发一次导航。虽然大多数链接的预期行为是将用户导航到一个新页面，但也有少数情况下用户将留在同一页面上：用户已经位于他们正在尝试导航到的页面一个导航守卫通过调用 return false 中断了这次导航当前的导航守卫还没有完成时，一个新的导航守卫会出现了一个导航守卫通过返回一个新的位置，重定向到其他地方 (例如，return

1.17 扩展 RouterLink*1.17.1 概述RouterLink 组件提供了足够的 props 来满足大多数基本应用程序的需求，但它并未尝试涵盖所有可能的用例，在某些高级情况下，你可能会发现自己使用了 v-slot。在大多数中型到大型应用程序中，值得创建一个（如果不是多个）自定义 RouterLink 组件，以在整个应用程序中重用它们。例如导航菜单中的链接，处理外部链接，添加 inactive-class 等。1.17.2 扩展 RouterLink让我们扩展 RouterLink 来

1.16 路由懒加载这个是很有用的，之前使用 import 静态导入组件是一次性导入所有的组件，当用户打开网页的时候，会下载所有的组件，这样的话就会很耗时，影响用户体验！1.16.1 概述当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效。1.16.2 动态导入Vue Router 支持开箱即用的动态导入，这意味着你可以用动态导入代替静态导入：// 将// imp

1.15 滚动行为*直接贴文档吧，使用时再进行详细探索，很难所有功能都亲自实现一遍！1.15.1 概述使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。注意: 这个功能只在支持 history.pushState 的浏览器中可用。1.15.2 基本使用当创建一个 Router 实例，你可以提供一个 scrollBehavior 方法：const router

1.14 过渡动效*1.14.1 概述想要在你的路径组件上使用转场，并对导航进行动画处理，你需要使用 v-slot API：<router-view v-slot="{ Component }"> <transition name="fade"> <component :is="Component" /> </transition></router-view>Transition 的所有功能 在这里同样适用。1