最近开发及 vue3 几个小总结

wade

发布于 2023-03-09 06:50:18

72300

代码可运行

文章被收录于专栏：coding个人笔记coding个人笔记

运行总次数：0

代码可运行

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

是否过度封装

可能水平不够吧，在 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()是强制该组件重新渲染，没用过，并不清楚具体行不行。所以有几个取巧的方法，在规范上可能会被说：

多一层字段，这样去重新赋值也会是响应式

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 自动导入

$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,
});