vue的matcher_vue-router工作原理概述和问题分析
工作原理简要流程图
hashchange
-->
match route
-->
set vm._route
-->
render()
-->
render matched component
问题
1. 为什么url变更时,router-view组件就能渲染出在routes中定义的与当前path匹配的组件?
root vue实例上定义了一个响应式属性Vue.util.defineReactive(this, '_route', this._router.history.current)
url变更时,会匹配到最新的route,并且会设置 this._routerRoot._route, 触发setter
router-view组件的render函数中有使用到 parent.$route, 也就是间接的触发了this._routerRoot._route的getter。即进行了依赖搜集。
则this._routerRoot._route的setter触发时即会触发router-view的渲染watcher, 再次渲染, 并且此时拿到的路由组件也是最新的。
本质上利用了vue的响应式属性,在route属性变更和router-view视图渲染之间建立关系。
route变更 => render重新渲染
2. router-view render中使用到parent.$route为什么就会被this._routerRoot._route收集watcher
在挂载router-view组件时,会生成一个watcher, router-view的render函数中又触发了_route的getter方法,那么此watcher就被收集到_route的Dep中了。
在_route的setter触发时,自然执行了这个watcher, 组件重新render。
在 vue的仓库中vue/src/core/instance/lifecycle.js中mountComponent方法中,能看到挂载组件时是会生成一个watcher的:
export function mountComponent(
vm: Component,
el: ?Element,
hydrating?: boolean
) {
...
let updateComponent
updateComponent = () => {
vm._update(vm._render(), hydrating)
}
new Watcher(vm, updateComponent, noop, {
before() {
...
}
})
...
return vm
}
3. this.$router, this.$route是怎么挂载每个vue组件上的?
Object.defineProperty(Vue.prototype, '$router', {
get () { return this._routerRoot._router }
})
Object.defineProperty(Vue.prototype, '$route', {
get () { return this._routerRoot._route }
})
4.替换routes的写法(这样写为什么有用)
// 替换现有router的routes
router.matcher = new VueRouter({
routes: newRoutes
}).matcher
router.matcher是比较核心的一个属性。对外提供两个方法match(负责route匹配), addRoutes(动态添加路由)。
具体原因:在做路径切换transitionTo方法中,首先就会使用const route = this.router.match(location, this.current)来匹配route, 其实内部会使用matcher来做匹配。修改了matcher即新的routes生效。
match (
raw: RawLocation,
current?: Route,
redirectedFrom?: Location
): Route {
// 这里使用matcher的match方法来做匹配
return this.matcher.match(raw, current, redirectedFrom)
}
对router.matcher属性做修改,即新的routes就会替换老的routes, 其实就是replaceRoutes()的含义(但是官方没有提供这个API)。
export type Matcher = {
match: (raw: RawLocation, current?: Route, redirectedFrom?: Location) => Route;
addRoutes: (routes: Array) => void;
};
5. router-view是什么
组件是一个functional 组件,渲染路径匹配到的视图组件。 渲染的组件还可以内嵌自己的 ,根据嵌套路径,渲染嵌套组件。
主要流程
初始化
实例化Router, options作为属性,根据mode生成HTML5History实例,或HashHistory实例
数据劫持,this.router.route =》 this.history.current
数据劫持,this.history.current.route变化时,自动执行render。
立即执行一次路由跳转(渲染路由组件)
路由监听
HashHistory监听hashChange事件,HTML5History监听popstate事件
路由变化处理
两种方式触发路由变化
a标签href方法(url先变化,会触发两个history监听的hashChange或popstate事件,然后进入路由变化处理)
调用router的push, replace, go方法(先进入路由变化处理,然后修改url)
路由变化具体处理过程
history.transitionTo(根据path匹配到相应的route, 然后调度执行hooks, 然后更新this.current属性,触发视图更新)
history.confirmTransition(调度执行上一个route和下一个route的相关生命周期hooks)
router的辅助API
push(先进行路由变化处理,在更新url,使用history.pushState)
replace() 和push处理方式一致, 只是更新url使用history.replaceState
go 使用history.go方法
参考链接
https://zhuanlan.zhihu.com/p/... 这篇文章讲的也比较详细,最好的是提供了自己造的vue-router的简易版轮子,更方便大家理解,这个轮子很好。 【推荐阅读轮子这一部分】
vue的matcher_vue-router工作原理概述和问题分析相关推荐
- 《深入理解Android》一2.1 浏览器工作原理概述
本节书摘来自华章出版社<深入理解Android>一书中的第2章,第2.1节,作者孟德国 王耀龙 周金利 黎欢,更多章节内容可以访问云栖社区"华章计算机"公众号查看 2. ...
- Direct3D 12工作原理概述
Direct3D 12工作原理概述 这只是Direct3d 12的概述.以后的教程将更深入. Pipeline State Objects (PSO)(MSDN Pipeline States) 管道 ...
- 神经网络工作原理概述
1.从最简单的神经网路开始 在学习机器学习的过程中,大家对神经网络应该都有一个基本概念:神经网络就像一个函数拟合器,它可以拟合任意函数. def NeuralNetwork(inputs, weigh ...
- 路由器的基本工作原理概述
路由器的基本工作原理概述 路由器是互联网的枢纽,是连接因特网中各局域网.广域网的设备,它会根据信道的情况自动选择和设定路由,以最佳路径,按先后顺序发送数据. 路由器作用在OSI模型的第三层(网络层), ...
- NTLM 工作原理概述
NTLM 工作原理概述 1. 为何采用NTLM 微软采用 Kerberos 作为 Windows 2000及之后的活动目录域的默认认证协议.当某个服务器隶属于一个Windows 服务器域或者通过某种方 ...
- SSD固态硬盘的结构和基本工作原理概述
展开 我们都知道,早期的电脑CPU是可以直接从硬盘上面读取数据进行处理的,随着科技的进步,时代的发展,计算机硬件的发展速度也是极其迅猛.CPU主频的不断提升,从单核到双核,再到多核:CPU的处理速度越 ...
- 计组之存储系统:5、cache(cache功能、cache工作原理、cache性能分析)
5.cache 思维导图 为什么要cache? Cache的工作原理 局部性原理 性能分析(加入cache) 空间局部性中的"附近"怎么定义? 待解决的问题? 思维导图 为什么要c ...
- rj45接口引脚定义_RJ45插座工作原理及接口定义分析
rj45插座工作原理分析 rj45插座滤波器中poe的工作原理是透过(局域网)网络线提供access point(无线接取点)工作所需之电源,并不需要单独连接电源线缆的全新供电方式,现许多企业已开始应 ...
- [4G+5G专题-144]: 测试-频谱分析仪工作原理与测试结果分析
作者主页(文火冰糖的硅基工坊):文火冰糖(王文兵)的博客_文火冰糖的硅基工坊_CSDN博客 本文网址:https://blog.csdn.net/HiWangWenBing/article/detai ...
最新文章
- 常量(const)与只读(readonly)字段
- php 一句话木马简介
- Part2_1 Urllib的get请求和post请求
- 前端学习笔记之-VUE框架学习-Vue核心
- 最详细的排序解析,理解七大排序
- Handler实现数据模板
- RPM包实现LAMP
- 【opencv 学习】仿射变换(图像的旋转、缩放、平移)
- Java Web学习总结(12)——使用Session防止表单重复提交
- Packet for query is too large (12164278 > 4194304). You can change this value
- 腾讯:干掉头条,先拿抖音开刀!
- 超详细面试准备(10分钟打遍所有初级后端开发面试)
- 使用SVG做网页背景
- 天津2019全国计算机二级,2019年上半年全国计算机等级考试报名啦
- 在我的世界里玩我的世界是一种怎样的体验?
- 上海东方广播电台 动感101.7(FM101.7)在线收听
- Core Animation (1)
- 焕焕写的--高德地图导入
- btrace安装,配置,使用,常见异常,解除安全限制
- K8S使用NFS动态存储(csi-nfs-driver)
热门文章
- SAP CRM Opportunity response area
- react native命令行全局安装
- dateFormat in DatePicker control Fiori - language 语言
- 继承的CSS类在Chrome开发者工具里的显示
- Cloud for Customer Restriction and Exclusion Product Lists
- ABAP Update Navigation Index
- Send data format set as XML
- 检测custom settype assign的UI view name
- Object category automatic search
- HTTPS和TCP的关系