VUE的路由模式与双向绑定原理

248 阅读1分钟

Vue的双向数据绑定原理:

1.监听器 Observer,用来劫持并监听所有属性(转变成setter/getter形式),如果属性发生变化,就通知订阅者
2.订阅器 Dep,用来收集订阅者,对监听器 Observer 和 订阅者 Watcher 进行统一管理
3.订阅者 Watcher,可以收到属性的变化通知并执行相应的方法,从而更新视图
4.解析器 Compile,可以解析每个节点的相关指令,对模版数据和订阅器进行初始化

Vue中的路由模式:

1.history模式:
         (1)html5中的两个API:pushState和replaceState,改变URL之后页面不会重新刷新,也不会带有#,页面地址,美观,URL的改变会出发popState事件,监听该事件也可以实现根据不同的Url渲染对应的页面内容
         (2)但是因为没有#会导致用户在刷新页面的时候,还会发送请求到服务器,为避免这种情况,需要每次改变URL的时候,将所有的路由重新定位到根路由下
2.hash模式:
         (1)后面的hash值的改变,并不会重新加载页面,同时hash值的变化会触发hashchange事件,该事件可以监听,可根据不同的哈希值渲染不同的页面内容