Check out the example on CodeSandbox.

使用 Vue 做项目也有两年时间了，对 Vue 的 api也用的比较得心应手了，虽然对 Vue 的一些实现原理也耳有所闻，例如 虚拟DOM、flow、数据驱动、路由原理等等，但是自己并没有特意去探究这些原理的基础以及 Vue 源码是如何利用这些原理进行框架实现的，所以利用空闲时…

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

在Vue单页应用中，如果在某一个具体路由的具体页面下点击刷新，那么刷新后，页面的状态信息可能就会丢失掉。这时候应该怎么处理呢？如果你也有这个疑惑，这篇文章或许能够帮助到你 现在产品上有个需求：单页应用走到某个具体的页面，然后点击刷新后，刷新的页面要与刷新前的页面要保持一致。 这…

使用Vuex做状态管理的时候，当用户刷新页面，Vuex里面的状态会全部丢失，从而引起程序的一场。解决思路是在creared()钩子函数里面添加以下方法: 上面代码的原理是，当页面刷新时，会将当前Vuex的状态存储到LocalStorage里面，刷新成功，再从LocalStora…

如果在简历上写“XX电商系统”的实现，其实第一直觉是这个人一定是从培训班出来的。而我们“项目管理”课程正好就是做一个小型电商网站。开发时长一个月左右，包含买家端、卖家端、管理员端，虽然业务逻辑比较常见，但是这次开发仍有收获，最重要的一点收获就是 对Vuex有了真正的实践和认识。…

在mutations,定义的方法里对vuex的状态操作的同时对存储也做对应的操作。 最直观的就是，手动写比较麻烦。

篇幅可能会比较长，但是我感觉有一套规范对于一个团队其实还是很重要的，这样在维护起来也会很方便，如果接下来的规范感觉对你们团队有帮助，希望可以在团队中进行实践或者推荐给你的leader，代码规范参考自：腾讯alloyteam团队，希望大家可以跟着看一遍，各取所需。 后续的文章我也…

通过前面的文章，我们认识了页面的响应是由Vue实例里的data函数所返回的数据变化而驱动，也重点学习了页面的响应与数据变化之间是是如何来联系起来的，并且分别在Vue2.x与3.x中，从零到一实现了两个版本下的数据变化驱动页面响应原理。 接下来在本文里一起看看当数据变化时，从源码…