最近开发及 vue3 几个小总结

wade3po
6,614 阅读5分钟

只是单纯记录一下最近维护了几个项目之后的感触，也只是在自己现在水平上面的一些感觉。发发牢骚，水水文章

是否过度封装

可能水平不够吧，在 axios 封装的时候，只是把响应和拦截还有一些全局的配置封装了一下，并没有加很多，也没有单独封装 get、post 这些方法，因为我觉得使用起来已经非常简单了，axios.get(url,param)、axios.get(url,param)，我觉得已经非常简便了，维护的旧项目封装了三层到四层吧，用起来在我看来是一样的。

基础配置和规范

很多时候，我们只要加一个 margin-top 或者 font-size 之类的样式，又不想单独写一个 class，写 style 代码又显得不规范。现在有挺多 css 框架可以实现，比如 tailwind css，也可以自己写一些常用的，肯定是写的不完整，完全可以后期有用到再补充。不止样式，其他也是一样，常用函数之类的。这不就是组件化、插件化吗。

项目运行起来，最开始开发工具肯定是没有报错的，后面不知道经过多久，报错了，但是还能运行，慢慢的也就没人管了，就放着吧（这是我第一次见）。真不应该，既然使用了 ts，使用了 eslint，警告和报错，能解决就解决了，肯定是不能出现在都是报错的编辑器进行开发。

代码规范和习惯也挺重要的，console 用多了，也不删除，虽然打包的时候会有插件把 console 去掉，开发的时候要看一些东西，控制台出现一大堆打印，代码出现各种打印的地方。

注释也是，有时候一些东西临时不用，是可以注释，但是简单的东西去掉就去掉了，放着约放越多，复制了别的页面的，没用的就都删了，见过 500 行代码注释 100 行？

如果可以，有个项目文档挺有必要的，介绍一下基础的东西，免得新接手的不知道有这个实现的功能，又自己写一套，当然，多问也是可以的。

好吧，既然无法改变，那就让自己适应。

reactive 声明无法重新赋值整个对象

很多情况下我们会直接重新赋值一个对象，尤其是字段多的时候，vue3 用 reactive 声明的如果重新赋值整个对象，是没法做到响应式的，或者只能一个一个字段去赋值。vue3 是没有 this.forceUpdate()，提供的forceUpdate()，提供的forceUpdate()强制该组件重新渲染，没用过，并不清楚具体行不行。所以有几个取巧的方法，在规范上可能会被说：

  • 多一层字段，这样去重新赋值也会是响应式
const obj = reactive({data: {}});
obj.data = {}
  • Object.assign
const obj = reactive({})
obj = Object.assign(obj, {})
  • 用 ref ref 一般用于声明基础数据类型和数组，声明对象，内部其实也是被 reactive 处理。
const obj = ref({})
obj.value = {}

上面三种取巧的方法，我比较建议使用 Object.assign，重新赋值整个对象场景不会非常多，大部分是请求数据回来会使用，另外两种增加代码量，而且规范上面比较不符合。

组件使用 v-model 传参

这个跟 vue2 里面的.sync 一样，常见的应该是封装弹窗组件：

//父组件
<Children v-model:modelValue="showModelValue"></Chidren>

//子组件
<el-dialog :model-value="props.modelValue" title="title" width="45%" :before-close="handleClose">

</el-dialog>

interface PropsType {
  modelValue?: boolean;
}

const props = withDefaults(defineProps<PropsType>(), {
  modelValue: false,
});

const emits = defineEmits(['update:modelValue']);

const handleClose = () => {
  emits('update:modelValue', false);
};

使用 setup 单文件

这个其实也不是什么小技巧，主要是维护了个项目，结果没用 setup，还是希望可以用起来，毕竟官方也是挺推荐的。

几个插件

  • plugin-vue-setup-extend：增强 setup，可以增加自定义 name
  • unplugin-auto-import：api 自动导入

(官网有提到在 3.2.34 或以上的版本中，使用 《script setup> 的单文件组件会自动根据文件名生成对应的name 选项，即使是在配合 使用时也无需再手动声明)

$ref

ref 声明都要用.value，然后现在提出了响应性语法糖，不需要.value，还在实验阶段，官网给出了警告：
响应性语法糖目前是一个实验性功能，默认是禁用的，需要显式选择使用。具体设计在最终定稿前仍可能发生变化，你可以查看 GitHub 上的提案与讨论来关注和跟进最新进展。

let count = $ref(0)

console.log(count)

function increment() {
  count++
}

环境配置

正常情况下，请求的 baseURL 配置/，访问的域名是什么就用什么，其他服务器 nginx 自己配置。架不住有特殊情况，所以根目录添加.env.dev、.env.prod 文件，里面声明的变量都要 VITE_开头，在其他地方 import.meta.env.去获取：

VITE_MODE="production"
VITE_BASE_URL="/https://www.test.com/v2"

const service: AxiosInstance = axios.create({
  baseURL: import.meta.env.VITE_BASE_URL,
});

package.json 里面配置 script 的时候加上--mode prod。（这边发现配置 prebuild，执行 build 的时候会自动执行 prebuild 然后再执行 build）

:deep

改变使用 UI 组件的样式，用:deep，可能会出现警告：
::v-deep usage as a combinator has been deprecated. Use :deep() instead.

改成：
:deep(.el-input-group__prepend) { background: #e5e5ea; }

不进行展示的不用 ref reactive 声明

既然用了 composition API，如果数据不是要在页面进行展示，就可以不用 ref 和 reactive 进行声明，虽然性能方面没什么非常大的影响，开发可读性和维护起来会更好一些。

如何更好的使用 typescript

现阶段，vue3 肯定是使用 typescript 一起开发，只是到目前为止，还没有看过哪个项目很好的使用 typescript，包括自己，很多情况下用上了 any，开发过程也都是先写开发代码再写一些声明的类型。

希望有大佬可以推荐几个项目长长眼，或者一些好的文章，要如何从先写 JavaScript 再写 typescript，转变到先写 typescript 再写 JavaScript。

欢迎关注个人订阅号 coding个人笔记

avatar
文章
阅读
粉丝