Vue全家桶
2020-12-30 11:37:12 0 举报AI智能生成
vue-router和vuex的源码简单实现
作者其他创作
大纲/内容
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的原型上
0 条评论
下一页
