6.7k 字 6 分钟

ref 和 reactive 是 Vue3 中实现响应式数据的核心 API

  • ref 用于包装基本数据类型
  • reactive 用于处理对象和数组。

尽管 reactive 似乎更适合处理对象，但 Vue3 官方文档更推荐使用 ref

下面我们从源码的角度详细讨论这两个 API，以及 Vue3 为什么推荐使用 ref 而不是 reactive ？

1.1k 字 1 分钟

inheritAttrs: false 是 Vue 2.4.0+ 引入的组件选项，用于控制是否从父组件继承属性到子组件的根元素上。当设置为 true 时（默认行为），父组件中的非 prop 属性会被应用到子组件的根元素上。当设置为 false 时，这些属性不会被应用到子组件的根元素上。 例如，如果你有以下父组件： <template> <div> <child-component class="parent-class" id="parent-id" />...
5.8k 字 5 分钟

# 前言

经常的，我们在日常工作中，会使用第三方 UI 组件库，比如：element-ui、vant-ui、iview、ant-design 等等。不管是为了业务考虑还是单纯的为了提高效率，我们会把一些经常用到的组件抽离、封装成公共组件，这样方便我们在不同的地方使用这个组件，减少重复代码的编写。

我们把对于第三方组件库的封装称为组件的二次封装，那么这带来有个思考，当我们在二次封装时，我们在封装什么？

10k 字 9 分钟

日常工作中，使用 vue 进行项目开发居多，因此把一些 vue 项目常见问题进行总结，在此记录，避免以后开发中做过多的重复工作。 而掌握一些有用的技巧，使用一些更高级的技术点，也能让我们成为更好的 Vue 开发者 # Watch immediate 当 watch 一个变量的时候，初始化时并不会执行，如下面的例子，你需要在 created 的时候手动调用一次。 // badcreated() { this.getsearchText();},watch: { searchText:...
8.6k 字 8 分钟

vue3 相比 vue2 对 ts 拥有更友好的支持，当初在用 vue2 写 ts 时各种装饰器，现在只要使用 <script setup lang="ts"></script> 标签就可以直接使用 ts。

5.1k 字 5 分钟

Git 提交规范进阶

  • Husky + Lint-staged 整合实现 Git 提交前代码规范检测 / 格式化；
  • Husky + Commitlint + Commitizen + cz-git 整合实现生成规范化且高度自定义的 Git commit message。

本文介绍通过 Husky + Lint-staged + Commitlint + Commitizen + cz-git 来配置 Git 提交代码规范。

通过 Husky、Lint-staged、Commitlint、Commitizen 和 cz-git 来设置 Git 提交前的代码规范检测和自动生成规范化 Git commit message。这个流程包括了 pre-commit 和 commit-msg 钩子的配置，以及 ESlint、Prettier 和 Stylelint 的整合使用，确保代码质量和提交信息的标准化。

4.1k 字 4 分钟

# 前言

谈到 Vite ，给人的第一印象就是 dev server 启动速度快。同样规模的项目，相比 Webpack 动辄十几秒甚至几十秒的的启动速度， Vite 简直是快到没朋友，往往数秒之内即可完成启动 (PS: 都没有时间去喝一杯 ☕️ 啦)。

正好小编最近在做一些关于开发体验的性能优化，就想着把手上一些项目的开发模式更新为 Vite 。经过一番操作，终于改造成功，而效果也不负众望，项目启动速度由原来的 25 s 如坐 🚀一般跃升为 2 s，简直夸张。虽然也出现了一些诸如首屏、懒加载性能下降等负面效果，但整体来说依然利大于弊，开发幸福感提升非常明显。

接下来小编就通过本文给大家分析一下，具体聊一聊 Vite 的快和慢。

1.1k 字 1 分钟

# 配置 husky、lint-staged、@commitlint/cli

  • husky ：一个为 git 客户端增加 hook 的工具
  • lint-staged ：仅对 Git 代码暂存区文件进行处理，配合 husky 使用
  • @commitlint/cli ：让 commit 信息规范化

1.4k 字 1 分钟

除了 Vue 内置的一系列指令 (比如 v-model 或 v-show ) 之外，Vue 还允许你注册自定义的指令 (Custom Directives)，以下就通过自定义指令的方式实现按钮权限控制。

参考：Vue 官方文档 - 自定义指令