vuerouter源码

‘壹’ Vue Router 源码学习笔记5 - 视图更新的实现

History模块的updateRoute方法主要执行三项关键任务。首先，此方法触发了cb函数，该函数相当于注册监听器，这一过程在VueRouter初始化(src/index.js)阶段完成。其次，更新了内部的_route属性。那么，视图为何会据此更新呢？答案在于响应式属性的机制。

VueRouter的install方法(src/install.js)对全局Vue对象进行了扩展，其中将_route属性定义为响应式属性。这意味着每当_route属性变化，视图就会自动更新。

响应式属性的实现原理基于Object.defineProperty，这是一种JavaScript对象属性的动态绑定机制。通过它，可以为对象属性添加读取和写入操作的监听逻辑，从而实现在属性值改变时触发相应的响应行为。

从设计模式的角度来看，这里采用了发布订阅模式。发布者（即属性值）在变化时发出事件，订阅者（视图）接收到事件后执行相应的更新操作。

进一步探索，可以尝试实现类似Object.defineProperty的功能，以深入理解其工作原理和在Vue中响应式系统中的应用。

‘贰’ 实现vue-router historty模式

在实现Vue-router的history模式时，需具备基本Vue知识。完整配置步骤如下：

在项目根目录下创建vue.config.js文件，加入以下配置并重启服务：

开始深入了解Vue-router的核心代码。

VueRouter包含关键属性：options、routeMap、data、install、构造函数和init。

options：接收类构造函数传入的对象。

routeMap：存储路由地址与组件的关联。

data：包含current属性，用于记录当前路由地址，使用响应式机制确保组件自动更新，如使用vue.observable()。

install：实现Vue插件功能。

构造函数：初始化所有属性和方法。

init：执行初始化任务，包括事件注册、创建routeMap与组件。

initEvent：监听popstate事件，实时响应浏览器历史变化。

createRouteMap：将路由规则转化为键值对，存放于routeMap。

initComponents：创建router-link、router-view组件。

总结：此过程基于拉钩课程学习经验。