cobish

## 使用 日常我们使用 vue-router 时： 在 template 中我们用 ```` 来做路由跳转，用 ```` 来做路由跳转后的展示。 ``` html Go to Foo Go to Bar ``` 在 js 中，先用 ``Vue.use`` 来安装 vue-router，然后 new 一个 ``VueRouter``...

## 前言 通过上篇，我们知道前端路由的两种实现方法，Hash 路由与 History 路由，并且用它们分别实现了一个前端路由。 接下来我们就将 Vue 与 Hash 路由结合，实现一个非常简单的 vue-router 吧。 ## 开始实现 想象一下，如果自己实现了一个 vue-router，会怎么去使用呢？参考 vue-router 官方的使用方式，看看 html 的使用： ``` html home book movie ``` 这里会有 ``router-link`` 和...

## 前言 最后来看一下 Promise 的几个常用的静态方法的实现： - Promise.resolve - Promise.reject - Promise.all - Promise.race 注：本次阅读的是 then/promise 的 4.0.0 版本，源码请戳 [这里](https://github.com/then/promise/tree/4.0.0)。 ## 解读 在 4.0.0 版本之中，Promise 对象被封装在了 ``core.js`` 文件中，常用的静态方法则写在了 ``index.js`` 文件中，打开 index.js...

## 前言 接下来要深入的是 then 链式调用，这个是实现中最绕的一块。在解读之前，我们再加深一下印象。 ``` constructor -> fn --同步--> resolve(reject) -> then -> then 回调 constructor -> fn --异步--> then -> resolve(reject) -> then 回调 ``` 无论是同步还是异步的情况，``then 回调函数`` 都会在...

## 前言 解读了同步执行 resolve 的代码，接下来要看的则是**异步执行 resolve**了。异步总会比同步复杂得多，它不会按照顺序执行，所以代码会跳来跳去地阅读。 与同步不同的是，异步时代码有可能会先执行 then 函数，将 then 的回调函数保存起来，等到执行 resolve 的时候，再将其取出执行。 ``` js new Promise(function (resolve) { setTimeout(function () { resolve(1); }, 1000); }.then(function (val) { console.log(val); });...

## 前言 在上一篇[《Promise 源码：实现一个简单的 Promise》](https://github.com/cobish/code-analysis/issues/10)当中，我们实现了一个可以简单可用的 Promise。但它实际上还是有不少的缺陷的，比如： 1. Promise 构造函数里直接同步 resolve，则执行不到 then。 2. 只有 resolve，没有 reject。 3. 一些极端的情况没有考虑到。 接下来通过阅读 github 上 then/promise 项目源码来学习学习 Promise 的实现原理。 本篇主要解决第一个问题，即**同步执行 resolve**，也是上篇实现的代码中忽略的问题：在执行 resolve 之后，没能执行到 then 的回调函数。...

## 前言 当一个组件要获取多个 state 的时候，声明计算属性就会变得重复和冗余了。我们可以使用到辅助函数 mapState 来更快更简洁地生成计算属性。 所以我们得清楚，mapState 的作用就是帮我们把一个对象或数组里的值转化成计算属性的写法。同理，其它的辅助函数也是大同小异，只要知道了 mapState 的实现，其它的也基本都明白了。 注：本次阅读的是 vuex 的 2.0.0 版本，源码请戳 [这里](https://github.com/vuejs/vuex/tree/v2.0.0)。 ## 准备 解读前，我们需要熟悉一些方法的使用： - [Array.isArray()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray) - [Array.prototype.map()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map) - [Object.keys()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/keys) ## 解读 先来 mapState...

## 前言 解读完 module 之后，个人觉得有了 ``namespaced`` 的 module 才算是真正的模块，于是又补充了这一篇。 namespaced 把 getter、mutation 和 action 都做了真正的模块化，使得 store 可以使用特定模块的 mutation 等。本篇就来瞧瞧 namespaced 是如何实现的？ ## 准备 这一次阅读的是 vuex 的 ``2.1.0`` 版本，源码请戳 [这里](https://github.com/vuejs/vuex/tree/v2.1.0)。建议下载并打开代码跟着解读，否则可能看得一脸懵逼。 ##...

## 前言 store 将应用的状态集中起来，但如果应用变得非常复杂时，即状态非常的多时，store 就有可能变得相当臃肿。module 能够帮 store 划分了模块，每个模块都拥有自己的 state、getter、mutation、action 和 module。 那么 module 又是怎样进行划分的，划分后的模块又是如何管理自己的状态呢？接下来就来解读 module 的实现吧。 ## 准备 解读前，需要对以下知识有所了解： 1. [Array.prototype.reduce()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce_clone) 2. [Vue.set()](https://cn.vuejs.org/v2/api/#Vue-set) ## 解读 在 vuex 文档里有这么一句话：默认情况下，模块内部的 action、mutation 和...

## 前言 mutation 用于同步更新 state，而 action 则是提交 mutation，并可进行异步操作，从而间接更新 state。 在还没解读之前，大家都认为 action 相对于 mutation 来说难理解得多，毕竟涉及到了异步。本篇就来看看 action 是如何处理异步的？ ## 准备 解读之前，你可能需要对 promise 的相关知识有所了解： 1. [Promise.resolve()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve) 2. [Promise.all()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/all) ## 解读 在解读前我们要熟悉 action 的用法，这里就直接解读，不再列出...