对于Vue，我们并不陌生；现在我们来梳理一下关于它的东西吧。
最基本的就是它的生命周期。
友好阐述 ：
mvvm是实现了双向绑定的一种模式,在视图层或模型层改变数据都会实现页面和模型数据的一种动态改变。
原理 ：
vue在创建 vm 时，会将数据配置到实例中，然后通过 Object.defineProperty 方法，为数据动态的添加 getter 与 setter 方法。当获取数据的时候，会触发对应的 getter 方法，当设置数据的时候，触发对应的 setter 方法。然后当 setter 方法触发完成，内部会进一步触发watcher,数据改变后视图就更新完毕了。
深入理解可以看: https://blog.csdn.net/weixin_44209472/article/details/88651509?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165882865116782388047920%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=165882865116782388047920&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2allsobaiduend~default-3-88651509-null-null.142v34pc_rank_34,185v2control&utm_term=vue%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9Amvvm&spm=1018.2226.3001.4187.
// An highlighted block
// 第一种方式：监听整个对象，每个属性值的变化都会执行handler
// 注意：属性值发生变化后，handler执行后获取的 newVal 值和 oldVal 值是一样的
example: {
// 每个属性值发生变化就会调用这个函数
handler(newVal, oldVal) {
console.log('oldVal:', oldVal)
console.log('newVal:', newVal)
},
// 立即处理 进入页面就触发
immediate: true,
// 深度监听 属性的变化
deep: true
},
// 第二种方式：监听对象的某个属性，被监听的属性值发生变化就会执行函数
// 函数执行后，获取的 newVal 值和 oldVal 值不一样
'example.name'(newVal, oldVal) {
console.log('oldVal:', oldVal)
console.log('newVal:', newVal)
}
前端路由本质就是去监听 URL 的变化，匹配路由规则，然后显示相应的页面，并且无须刷新页面。
** hash 模式和 history 模式** ：
区别
hash 出现在 URL 中，但不会被包含在 http 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面，Hash 相对来说更简单，并且兼容性也更好。
history 是HTML5 新推出的功能，它利用了 html5 history interface 中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器记录栈，在当前已有的 back、forward、go 基础之上，history 改变 URL 同样不会引起页面的刷新，只会更新浏览器的历史记录。
原理
hash 模式的原理是 onhashchange 事件，可以在 window 对象上监听这个事件。 history ：hashchange 只能改变 # 后面的代码片段，history api （pushState、replaceState、go、back、forward） 则给了前端完全的自由，通过在window对象上监听 popState() 事件。
** $route 和 $router ** ：
route是用来获取路由信息的，包括了路由的跳转方法，钩子函数等：
<p>路径：{{$route.path}}</p>
<p>参数：{{$route.params }}</p>
<p>路由名称：{{$route.name}}</p>
<p>路由查询参数：{{$route.query }}</p>
router是用来操作路由的，包括path，params，hash，query，fullPath，matched，name等路由信息参数。
this.$router.push("/login");
//使用对象的形式
this.$router.push({ path:"/home" });
//使用对象的形式，参数为地址栏上的参数
this.$router.push({ path:"/home",query:{username:"jack"} });
//使用对象的形式 ，参数为params 不会显示在地址栏
this.$router.push({path:'/detail',params:{id:5,name:'lili'}})