前言

就在前两天，一篇反对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
• 逻辑更加清晰，开发起来更加简单

概念

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

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

前言

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

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

问题

在main.js文件中import‘../theme/index.css’ 报错：

1
2
3
4
5

ERROR  Failed to compile with 1 errors 
                                                                                                                                                                                             
This relative module was not found:

* ../theme/index.css in ./src/main.js

问题

WebStorm的缩进规则和ESlint-vue的校验规则冲突引起的问题。

前提条件

• Vue项目
• 安装时打开ESLint校验功能
• 开发工具WebStorm

代码格式化会出现两种：

前言

Vue框架是什么，怎么用，相信大家都已经很熟悉了，诚如Vue教程所说，它是一套构建用户界面的渐进式Web前端框架。

但是很多人就是拿来主义，就只管用，博主也是这类人 = =!, 但是随着深入使用Vue，越发觉得深知其原理的重要性，那么，本文来探讨一下Vue的底层原理到底是什么，是怎么实现的。

前言

什么是前端路由

每次 GET 或者 POST 请求在服务端有一个专门的正则配置列表，然后匹配到具体的一条路径后，分发到不同的 Controller，进行各种操作，最终将 html 或数据返回给前端，这就完成了一次 IO。

前端路由的实现有两种：

• URL的hash，即锚点（#），js 通过 hashChange 事件监听 url 的变化
• HTML5 的 History 模式

优点：

• 页面持久性，如音乐网站
• 前后端彻底分离，如 Angular 的 ngRouter，React 的 ReactRouter，还有 Vue 的 vue-router

需要考虑的问题：

• 页面的拔插性
• 页面的生命周期
• 内存管理等

前端工程化与webpack

前端工程化主要解决的问题：

• JavaScript、css 代码的合并与压缩
• CSS 预处理：Less、Sass、Stylus 的编译
• 生成雪碧图
• ES6 -> ES5
• 模块化等

webpack 的主要使用场景是单页面富应用（SPA），将一些诸如：typescript、less、jpg、vue等格式的文件通过特定的加载器（Loader）编译后，最终统一生成 .js、.css、.png等静态资源文件。

如何文件都可称为是一个模块。webpack就是处理模块间的依赖关系，并把他们进行打包。