来一起手写一个函数式mini-vue-router🧚🏾

简介: 来一起手写一个函数式mini-vue-router🧚🏾

image.png

阅读本文🦀



1.了解到vue插件开发的基本流程

2.了解到vue-router的基本实现原理

3.自己动手实现一个函数式mini-vue-router

本项目代码仓库(逐行注释) mini-vue-router 👉 github.com/sudongyuer/… 欢迎star 🌟🌟🌟


前言🌵



Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。

需求分析


SPA页面要实现URL变换但浏览器不刷新,组件切换。

需要借助浏览器提供的API history 或者hashcahnge事件来实现


原理剖析与实现 👻



创建mini-vue-router构造函数以及install静态函数


当执行vue.use注册插件的时候,vue都会先去执行一次这个插件函数的install方法

初始化MiniVueRouter构造函数


  • 将路由表注册到路由实例


  • 利用Vue.util声明一个响应式数据current,挂载到mini-vue-router实例上,当然这个响应式数据声明在哪里都可以,声明在router实例上,是为了后边的router-view能够方便使用到这个响应式数据


  • 监控hashchange事件,一旦发生更新就去更新响应式数据current


image.png

MiniVueRouter绑定静态方法 intall


install静态方法中,我们要做如下的事


  • 保存Vue构造函数实例方便我们后边能够使用到Vue构造函数提供的一些静态的方法


  • 利用Vue.mixin 增强组件,将mini-vue-router 实例挂载到Vue的原型上,这样每个Vue组件实例就都能访问到router实例对象,从而能够访问到实例对象中的路由表,以及挂载到router实例上的响应式数据current


  • 注册两个全局Vue组件 router-link    router-view 并编写他们的render函数,在render函数中我们使用我们的响应式数据current去查找路由表中对应的路由组件,并完成渲染


  • ⚠️核心,在render函数中我们使用了current这个响应式的数据,一旦它发生变化,那么我们当前组件就会重新之心render函数渲染,一切都依赖于Vue提供的响应式数据和他的依赖收集机制

image.png


创建路由表注册路由


  • 使用Vue构造函数注册mini-vue-router


  • 挂载路由表到路由上并导出

image.png

测试


main.js中导入我们mini-vue-router实例,并挂载到Vue根组件上测试


image.png

mini-vue-router 正常运行 🤪

image.png

编写文档 📃


一个库代码逻辑写好后,最重要的还有文档编写啦😁,写上好看易懂的文档,这个库就算大功告成了


本项目代码仓库(逐行注释) mini-vue-router 👉 github.com/sudongyuer/… 欢迎star 🌟🌟🌟

image.png

收获🍁


编写这个库最大的收获了解了vue-router的基本原理,以及一些vue响应式的知识,不得不感叹,vue的设计真的是强啊,尤大太牛了,也希望通过这个项目帮助正在阅读文章的你了解到vue-router的原理


本项目代码仓库(逐行注释)  mini-vue-router 👉 github.com/sudongyuer/… 欢迎star 🌟🌟🌟


相关文章
|
JavaScript 前端开发
手写实现一个Mini-Vue
简单手写实现一个Mini-Vue
手写实现一个Mini-Vue
|
JavaScript 前端开发 编译器
[Vue官方教程笔记]- 尤雨溪手写mini-vue(上)
这周我看了看了尤大神亲手写的mini版Vue3,笔记如下请大家指正。
849 0
|
JavaScript 编译器
[Vue官方教程笔记]- 尤雨溪手写mini-vue(下)
[Vue官方教程笔记]- 尤雨溪手写mini-vue
305 0
|
存储 JavaScript
看不懂vue源码?没事,来手写一个mini-vue3吧【reactivity】
看不懂vue源码?没事,来手写一个mini-vue3吧【reactivity】
297 0
看不懂vue源码?没事,来手写一个mini-vue3吧【reactivity】
|
JavaScript 前端开发 调度
浅析MVVM原理,实现一个mini-vue
浅析MVVM原理,实现一个mini-vue
108 0
浅析MVVM原理,实现一个mini-vue
|
JavaScript
vue再读27v-model语法糖原理
vue再读27v-model语法糖原理
132 0
vue再读27v-model语法糖原理
|
JavaScript 前端开发 算法
vue3 源码学习,实现一个 mini-vue(十四):构建 compile 编译器(上)
vue3 源码学习,实现一个 mini-vue(十四):构建 compile 编译器(上)
vue3 源码学习,实现一个 mini-vue(十四):构建 compile 编译器(上)
手写实现vue-lazyload的核心逻辑
手写实现vue-lazyload的核心逻辑
264 0
|
前端开发 容器
简单手写实现react的函数组件
简单手写实现react的函数组件
185 0
|
JavaScript 前端开发 API
通俗易懂讲解并手写一个vue数据双向绑定案例
通俗易懂讲解并手写一个vue数据双向绑定案例
149 0

热门文章

最新文章