Vuex原理和VueRouter理解

1,084 阅读1分钟

下班下班,弹钢琴去~~

Vuex原理

vuex响应式原理------对应是vue.js中 Dep对象操作;当数据发生变化时候,dep会通知所有watcher进行更新;

每一个vue实例都对应了一个watcher,而这些watcher也会放入dep里面进行管理;

一旦发生响应式(数据更新),dep就会通知下面所有watcher进行更新;

模仿vuex做个精简写法测试下:

VueRouter 原理

核心:通过history实现不同功能的,通过mode决定,不同 mode 对应不同的 history调用底层不一样;但都是都是通过window提供location来进行浏览器事件监听;Vue-route本质是对原生事件封装;

**以HashHistory为例
**

Vue-router 实例化时会初始化this.history,不同mode对应不同的history (例如果hash,对应hashHistory实例)

以HashHistory 为例,Vue-router的push方法

本质是调用了window.location.hash =path 这个方法

对路由监听通过hash相应事件监听实现:(相关操作触发浏览器事件)