最近闲来无事，将博客重新规划了一下。从顶级域名 toocf.com 中剥离出来，放在了 blog.toocf.com 二级域名下。

在顶级域名下重新写了一个导航站点，博客就叫乘风博客，而导航自然就是乘风导航了。

本来还是想从 WordPress 中找一个好看点的导航站的，还别说WP的主题是真的多，各种简约时尚的设计看的是眼花缭乱。

体验过后还是决定自己通过借鉴他们的优点，然后用vue3自己写一个比较轻便的导航站点，主要就是开发人员使用，没必要整的那么笨重。我自己也不想一次用两套 WordPress。

工作中主要还是使用PHP，虽然也使用 Uniapp 写过几个 Vue2 的小程序，但是对于前端技术只能说会用，和精通沾不到边。

正好借这次机会，好好学学 Vue3 以及周边相关的最新技术，当然 TypeScript 是暂时不打算学习。

通过一段时间的考察，我决定使用 Vue + VueRouter + Vite + Pina + ElementPlus 技术栈，简单流行易上手，说干就干。

去相关官网看过文档之后，参考着自己收藏的导航UI图，再去查阅了不少开源的 Vue3 项目，耗费了一整天的时间才将导航页面画好，至于后端接口直接拿来一个成熟的PHP后台管理项目，稍加改动就写好了对应的接口和后台管理功能。

（在这必须夸赞一下PHP，不愧是世界上最好的语言，真没之一！）

因为在 Vue3 中增加了 setup 语法糖，加上所谓的 Composition API 组合式接口，再加上 Hooks 函数，简直是想怎么写就怎么写。

现在 Vue3 的自由程度已经让我感到担忧了，这种复用程度高的离谱。 任何一点功能、页面、样式都能复用，高复用虽然是好事，但我通过阅读一些开源的项目发现，通过编译器打开后别人的项目代码真的是一点都不想看。各种引用的组件、页面、函数，一时半会根本无法看透一个页面的整体布局，严重增加了心智负担。

不排除是我太懒，且非前端高手的缘故。

甚至我在想，以后会不会一个标签就给封装成一个组件，功能也是拆到最小，实现更厉害的组合式布局？（开玩笑）

使用 Vue3 过程中也有需要注意的地方，比如因为每个功能定义的变量方法写在单独的地方之后，就不适合将所有变量定义在一个对象中。

独立定义变量或常量之后，因为要考虑响应式问题，就不能和以前一样简单的 “=” 赋值。

基本类型赋值只要不要忘记加上 “.value” 就好，而最常用的数组和对象赋值就需要注意一下：

数组赋值

// 定义数组
const newList = reactive([])

// 接口返回数组数据 resList
// push 或者 unshift 以及其他数组函数
newList.push(...resList)

// 清空该数组不能直接赋予空数组方式
newList.length = 0

对象赋值

// 定义对象
const newObj = reactive({})

// 接口返回对象数据 resObj
Object.assign(newObj, resObj)

好了，吐槽完毕！