Vue 基础

双向绑定原理

v-model绑定dom节点

以input类型为text举例，vue会将input元素的value属性绑定到v-model对应的响应式参数上，这样修改参数的时候，input的内容也会更新。同时为input元素注册input事件回调，在会回调中对绑定到v-model中的参数进行修改，这样就能在输入框输入内容的时候，同步更新响应式数据。

不同类型的input元素，绑定的属性名和注册的事件名不同。

1. text、textarea为value属性和input事件。
2. checkbox、radio为checked属性和change事件。
3. select为value属性和change事件。

v-model绑定组件

为组件添加一个prop和事件，默认情况加的prop名是value,事件名是input，也可配置model选项指定prop名和事件名。

Vue-Router 原理

history.push 前进功能

1.匹配路径 2.调用路由导航守卫 3.对RouerView中的组件进行替换 4.调用history.pushState将当前url添加到浏览器会话的历史访问堆栈中 (原因是单页应用并没有实际进行页面的切换，所以在页面切换时不会体现在浏览器访问记录中，也没法通过前进和后退按钮实现单页页面的前进后退功能)

监听window popstate事件，在回调中调用路由导航守卫，然后进行页面组件的替换。

history.back 后退功能

调用history.go传入-1实现后退功能，这时会弹出历史访问堆栈顶部的记录，并触发popstate实现页面组件切换。

history.replace 替换功能

调用history.replaceState实现替换功能，这时会替换历史访问堆栈顶部的记录，并触发popstate实现页面组件切换。

当不支持pushstate时，会用history.assign代替window.pushState，用history.replace代替window.replaceState 使用pushstate和replaceState的主要优势是不会进行页面刷新。