Vue-router源码-各原理简单总结

1,初始化

初始化之前,首先要通过import VueRouter导入,说明VueRouter也是一个对象。通过源码看到,在new Vue()的时候,将实例化的router对象传入,然后与vuex同样的原理,利用data实现响应式,在Vue.use调用router对象的install方法时初始化,注册插件,将插件存入installedPlugins中保证不会重复注册,挂载到全局,同样也是借助beforeCreate钩子函数实现。

2,router-view

router-link和router-view两个组件就是通过传进来的Vue对象定义的Vue.component('router-view',{ render(h) { xxx} }),然后通过render方法编写的渲染逻辑。

无论是hash模式还是history模式,其原理都是监听相应的改变事件,利用vue的内部响应式原理,url发生变化来通知观察者刷新router-view视图显示。

同上,router-link的定义为Vue.component('router-link',{ render(h) { xxx} }),但是router-link的render函数是将他渲染成了a标签,通过a标签改变url,完成视图的更新。

其他详细解读可参考手写vue-router核心原理

相关推荐
Mr Xu_13 小时前
Vue 3 中计算属性的最佳实践:提升可读性、可维护性与性能
前端·javascript
jerrywus13 小时前
我写了个 Claude Code Skill,再也不用手动切图传 COS 了
前端·agent·claude
玖月晴空13 小时前
探索关于Spec 和Skills 的一些实战运用-Kiro篇
前端·aigc·代码规范
子兮曰13 小时前
深入理解滑块验证码:那些你不知道的防破解机制
前端·javascript·canvas
Highcharts.js13 小时前
【Highcharts】如何用命令行渲染导出图片?
javascript·导出·开发文档·highcharts·命令行渲染·命令行功能
weixin79893765432...13 小时前
Vue 组件的更新过程(编译系统 + 响应式系统 + 虚拟 DOM & Diff)
vue.js
会一丢丢蝶泳的咻狗13 小时前
Sass实现,蛇形流动布局
前端·css
攀登的牵牛花14 小时前
前端向架构突围系列 - 状态数据设计 [8 - 4]:有限状态机 (FSM) 在复杂前端逻辑中的应用
前端
Lsx_14 小时前
前端视角下认识 AI Agent 和 LangChain
前端·人工智能·agent
陈振wx:zchen200814 小时前
JavaScript
javascript·js