前言

就在前两天，一篇反对Vue2升级到Vue3的文章在vue官方社区引起了热议。该文章从实际应用角度出发，分析了Vue2到Vue3在真实项目中实操升级的痛点，提出了一个反对的声音：Vue3的升级是一个错误的选择。

在一片热议中，甚至vue作者尤雨溪都出来亲自解释并承认了一些问题。原作者首先声明了他并没有贬低Vue3的意思。他认为Vue3是非常非常棒的框架，解决了Vue2中很多潜在问题，技术层面改善了开发人员的开发体验，并显著提高了性能。原作者主要的问题，是从Vue3突破性的改变以及周边生态圈未能及时跟上的角度，重点强调了迁移升级成本+风险较大。

关于升级成本问题：尤大也承认了Vue3升级体验并没有想象中的那么流畅，Vue4会吸取经验，做好平稳迭代。这一点本文会在下面详细说明。

前言

平时在Vue项目中，最常用的状态管理工具就是Vuex了，而最新的Pinia是尤雨溪强烈推荐的一款Vue状态管理工具，也被认为是下一代Vuex的替代产品。

其优点如下：

• 去除了mutations，只有 state，getters和actions，其中actions支持了同步和异步操作
• 不会像Vuex那样有模块嵌套，Pinia只有store的概念，store之间可以相互使用，互不影响，达到模块扁平化的效果
• 更好地支持ts
• 更好地支持Vue2/Vue3
• 逻辑更加清晰，开发起来更加简单

前言

pnpm是什么？

它是Node.js 的替代包管理器。它是 npm 的直接替代品,但速度更快、效率更高。

相对于npm、yarn，它的知名度并不高，但是它的性能及实用性却非常高，本次将学习到pnpm的以下知识：

• 基础使用、常用命令等
• 依赖包是如何管理和存储的
• workspace协议，支持monorepo
• 对比npm、Yarn，有什么优势
• 如何将npm、Yarn转为pnpm

背景

你是否会遇到提交代码时，没有改到同事业务模块的任何一行代码，却被提示冲突？提交注释凌乱看不懂的情况？等等。

那么为了项目代码风格统一，代码格式化规范统一，避免代码冲突，提高代码的规范性，提高CodeReview效率等等。因此结合Eslint + Prettier + Husky + Commitlint+ Lint-staged的前端工程化规范应运而生，最终提升了我们开发效率、项目质量。

前言

在我们的日常任务中，我们会编写诸如排序、搜索、查找唯一值、传递参数、交换值等功能，所以在这里我列出了我的速记技巧列表！

JavaScript 真的是一门很棒的语言，值得学习和使用。对于给定的问题，可以有不止一种方法来达到相同的解决方案。在本文中，我们将只讨论最快的。

这些方法会帮助到我们：

• 减少 LOC（代码行数）的数量，
• 编码比赛，
• 黑客马拉松
• 或其他限时任务。

大多数这些 JavaScript Hacks 使用 ECMAScript6(ES2015) 以后的技术，尽管最新版本是 ECMAScript11(ES2020)。

概念

什么是双向数据绑定，这里就不做赘述了，vue的双向数据绑定是什么大家都很了解了，这里主要讲vue2和vue3中双向绑定的区别。

vue2中使用“Object.defineProperty”对象以及对象属性的劫持实现双向绑定；而vue3中的响应式采用了ES6中的“Proxy”方法实现双向绑定。

背景

一般前端开发工程有以前要求：

• 模块化(js)
• 组件化(ui)
• 规范化
• 自动化(构建,部署,自动化测试)

为了要处理代码压缩混淆, 处理浏览器JavaScript的兼容性, 性能优化等问题，webpack的使用则非常适合。

背景

假如后台返回一个扁平的数据结构，转成树，应该怎么做呢？

打平的数据内容如下：

1
2
3
4
5
6
7

let arr = [
    {id: 1, name: '部门1', pid: 0},
    {id: 2, name: '部门2', pid: 1},
    {id: 3, name: '部门3', pid: 1},
    {id: 4, name: '部门4', pid: 3},
    {id: 5, name: '部门5', pid: 4},
]

前言

客户端存储的概念

1. web应用允许使用浏览器提供的API将数据存储在客户端电脑上；
2. 客户端存储遵守“同源策略”，不同的站点页面之间不能相互读取彼此的数据；
3. 在同一个站点的不同页面之间，存储的数据是共享的；
4. 数据的存储有效期可以是临时的，比如关闭浏览器数据就销毁； 也可以是永久的，可以在客户端电脑上存储任意时间；
5. 在使用数据存储是需要考虑安全问题，比如银行卡账号密码

而把数据保存到磁盘中，就是缓存技术。

平时项目中比较常用的存储方式，有cookie、localStorage、sessionStorage。

前言

众所周知， hash 和 history 在前端面试中是很常考的一道题目。从表面上看，hash 和 history 的区别可能就在 hash 的 url 里面多了个 # ，而 history 就不会。

对于前端路由来说， hash 和 history 都可以用于前后端分离项目，且两者有各自的特点和各自的使用场景，在使用过程中主要要了解当前项目所处的场景，以便于更好地判断使用哪一种路由模式更佳，我们一起来探讨下。