

首页  思维导图  详情



Vue全家桶

2020-12-30 11:37:12   0  举报





AI智能生成

vue-router和vuex的源码简单实现

vuex

vue-router

模版推荐

作者其他创作

大纲/内容

Vue-Router

实现VueRouter类

处理传进来的router选项

this.$options = options

监听 hashchange 变化，绑定事件

通过当前的url路径和route中的path匹配来渲染对应的组件，要确保数据是响应式的

设置一个matched数组，用来存储对应深度的route

match方法匹配路由，递归遍历路由表获得匹配关系的数组

遍历routes，拿出path存入matched数组中

如果当前的route有子路由，则需要递归遍历，继续存入matched数组中

hash变化的时候需要重新匹配

实现install方法，挂载$router

将传进来的Vue实例存储到全局，以方便在VueRouter类中可以使用，而不需要将整个Vue打包

由于use方法调用install时实例还没有创建，所以需要使用全局混入来延迟执行后续代码

通过beforeCreate方法在组件创建的时候把实例挂载到Vue的原型上

实现两个全局组件

router-view组件

使用Vue.component的render方法渲染从route里面拿出来的component

根据当前的url的hash值找到route里面对应的组件，然后渲染

嵌套路由的实现：标记当前router-view的深度，把自己标记为routerView，然后遍历查找上一层是否为routerView，是的话就depth+1

router-link组件

Vue.component 里面使用render方法，其实就是一个a标签

将传入to的路径转化为a标签的href属性

Vuex

实现Vuex类

处理传进来的store选项

响应式处理state，可以直接利用vue里面的data来设置响应式数据

避免用户在外面直接可以修改到state的值，需要将state隐藏起来

由于在使用的时候有可能this会丢失，所以需要把this绑死

实现commit和dispatch方法

暴露gettters属性可以借助vue的computed属性来实现

定义computed属性和暴露getters属性

把当前实例存储，遍历getters里面传进来的方法名

获取用户定义的getters方法，然后将其转化为computed无参数形式

给getters定义只读属性

实现install方法，挂载$store

实现方法类似上面的Vue-Router

唯一不同的是暴露的时候需要将store和install方法一起暴露，外面才能通过Vuex.store来使用

通过beforeCreate方法在组件创建的时候把store实例挂载到Vue的原型上

 Collect

Get Started

springcloud/springcloud alibaba全家桶（持续完善）

 Collect

Get Started

springcloud全家桶

 Collect

Get Started

JVM全家桶

 Collect

Get Started

vue全家桶





0 条评论

下一页