11 2023 档案
摘要：前言 在上一篇 [手撕Vue-Router-实现router-link] 中，我们实现了 router-link 组件，这一篇我们来实现 router-view 组件。 实现思路 router-view 其实与 router-link 是同一个世界，同一个梦想的，那么我就废话不多说了，直接上代码。
阅读全文
摘要：前言 在上一篇 [手撕Vue-Router-添加全局
摘要：前言 什么是开闭原则？ 开闭原则（Open-Closed Principle, OCP）是 面向对象 设计中的一个重要原则。 它指出软件实体（如类、模块、函数等）应该对扩展开放，对修改封闭。这意味着一个实体允许其行为被扩展，但不允许修改其源代码。 不遵循开闭原则的代码示例 假设有一个简单的类，用于根
阅读全文
摘要：前言 什么是工厂方法 工厂方法 是一种 创建型 设计模式 什么是 创建型 设计模式？ 创建型设计模式专注于处理对象创建机制，以合适的方式来创建对象。该模式通过控制对象的创建方式来解决问题。 工厂方法的作用 解决了在 不指定具体类 的情况下创建产品对象的问题，这句话要怎么理解呢？ 工厂方法模式通过让子
阅读全文
摘要：前言 经过上一篇文章的介绍，完成了初始化路由相关信息的内容，接下来我们需要将路由信息挂载到Vue实例上，这样我们就可以在Vue实例中使用路由信息了。 简而言之就是给每一个Vue实例添加一个$router属性，这个属性就是我们在上一篇文章中创建的VueRouter实例。 实现思路 我们需要在Vue实例
阅读全文
摘要：前言 经过上一节课的学习，我们已经完成了提取我们想要的路由信息数据格式，提取完毕了之后，接下来我们该干什么，接下来需要做的步骤就是监听路由的变化，保存当前的路由。 那么就会遇到几个问题，就是怎么监听，怎么保存，我们先回到 VueRouter 的官方文档，点击右上角的 API 参考，然后拖动到底部，在
阅读全文
摘要：前言 好了经过上一篇的学习，我们已经知道了如何监听 Hash 的变化，如何监听路径的一个变化，本篇我们就可以来实现我们自己的 VueRouter 了, 那么怎么实现呢，在实现之前我们先来回顾一下官方的 VueRouter 是怎么使用的。 VueRouter 的使用 首先需要去下载官方的 VueRou
阅读全文
摘要：前言 本文是手写Vue-Router的第一篇，主要是对Vue-Router的知识储备，为后面的手写做准备。 那么 VueRouter 怎么实现呢？要想实现 VueRouter，首先要知道 VueRouter 它的本质是什么。 VueRouter 的本质 VueRoute 的本质是什么？VueRout
阅读全文
摘要：前言 经过上一篇文章的介绍，我们实现了将模块安装到 store 中，那么本章我们就来介绍一下怎么安装模块当中的方法也就是 actions、mutations、getters。 所以本次文章的目标就是将模块当中的 actions、mutations、getters 安装到 store 中，然后在组件中
阅读全文
摘要：前言 根据上一篇，【手写Vuex】-提取模块信息，我们已经可以获取到模块的信息了，将模块信息变成了我们想要的数据结构，接下来我们就要根据模块的信息，来安装模块的数据。 在上一篇当中我们定义了一个 ModuleCollection 类，这个类的作用就是将模块的信息转换成我们想要的数据结构。 接下来我们
阅读全文
摘要：前言 在上一篇【手撕Vuex-模块化共享数据】文章中，已经了解了模块化，与共享数据的注意点。 那么接下来就要在我们自己的 Nuex 中实现共享数据模块化的功能。那么怎么在我们自己的 Nuex 中实现共享数据模块化的功能呢？ 处理数据 也非常的简单，是不是就是处理一下子模块的数据，处理一下子模块的 g
阅读全文
摘要：前言 好，经过上一篇的介绍，了解了 Vuex 当中的模块化，本章主要介绍 Vuex 当中的模块化共享数据下篇。 我们知道在全局的 Store 对象当中，我们可以定义全局的数据，那么如果我们在模块当中也定义了一个属性名称和全局的属性名称相同，那么会发生什么呢？ 我们先来看看，在全局当中定义了一个 gl
阅读全文
摘要：前言 好，经过上一篇的介绍，实现了 Vuex 当中的 actions 方法，接下来我们来实现 Vuex 当中的模块化共享数据（modules）。 modules 方法用于模块化共享数据，那么什么叫模块化共享数据呢？其实非常简单。 过去我们将所有模块的数据都放到 state 中共享，例如： 我们有三个
阅读全文
摘要：经过上一篇章介绍，完成了实现 mutations 的功能，那么接下来本篇将会实现 actions 的功能。 本篇我先介绍一下 actions 的作用，然后再介绍一下实现的思路，最后再实现代码。 actions 的作用是用来异步修改共享数据的，怎么异步修改，这个时候我们回到 Vue 的官方 Vuex
阅读全文
