vue-router

本文使用的Vue版本：2.6.10 Vue为我们提供了很多高级特性，学习和掌握它们有助于提高你的代码水平。 一、watch进阶 从我们刚开始学习Vue的时候，对于侦听属性，都是简单地如下面一般使用： watch:{ a(){ //doSomething } } 实际上，Vue对watch提供了很多进阶用法。 handler函数 以对象和handler函数的方式来定义一个监听属性，handler就是处理监听变动时的函数： watch:{ a:{ handler:'doSomething' } }, methods:{ doSomething(){ //当 a 发生变化的时候，做些处理 } } handler有啥用？是多此一举么？用途主要有两点： 将处理逻辑抽象出去了，以method的方式被复用 给定义下面两个重要属性留出了编写位置 deep属性 不知道你注意到了没有？ 当watch的是一个Object类型的数据，如果这个对象内部的某个值发生了改变，并不会触发watch动作！ 也就是说，watch默认情况下，不监测内部嵌套数据的变动。但是很多情况下，我们是需要监测的！ 为解决这一问题，就要使用deep属性： watch:{ obj:{ handler:'doSomething', deep:true } }, methods:{ doSomething(){ //当 obj

本文使用的Vue版本：2.6.10 Vue为我们提供了很多高级特性，学习和掌握它们有助于提高你的代码水平。 一、watch进阶 从我们刚开始学习Vue的时候，对于侦听属性，都是简单地如下面一般使用： watch:{ a(){ //doSomething } } 实际上，Vue对watch提供了很多进阶用法。 handler函数 以对象和handler函数的方式来定义一个监听属性，handler就是处理监听变动时的函数： watch:{ a:{ handler:'doSomething' } }, methods:{ doSomething(){ //当 a 发生变化的时候，做些处理 } } handler有啥用？是多此一举么？用途主要有两点： 将处理逻辑抽象出去了，以method的方式被复用 给定义下面两个重要属性留出了编写位置 deep属性 不知道你注意到了没有？ 当watch的是一个Object类型的数据，如果这个对象内部的某个值发生了改变，并不会触发watch动作！ 也就是说，watch默认情况下，不监测内部嵌套数据的变动。但是很多情况下，我们是需要监测的！ 为解决这一问题，就要使用deep属性： watch:{ obj:{ handler:'doSomething', deep:true } }, methods:{ doSomething(){ //当 obj

一、学习资料参考 1.1、Vue.js 官网： Vue.js https://cn.vuejs.org/ 官方文档： 介绍 — Vue.js https://cn.vuejs.org/v2/guide/ API 参考： API — Vue.js https://cn.vuejs.org/v2/api/ 附：vue.js（1.0版本） https://v1-cn.vuejs.org/ （教程和API自行寻找） 1.2、Vue Router 学习和理解： 官方文档： 介绍 | Vue Router https://router.vuejs.org/zh/ API 参考： API 参考 | Vue Router https://router.vuejs.org/zh/api/ 1.3、菜鸟教程： Vue.js 教程 | 菜鸟教程 http://www.runoob.com/vue2/vue-tutorial.html 二、主要笔记理解和整理 注：此部分仅用于自己整理理解。对其他人可能不适用。请知悉~~ 使用：具体可参考菜鸟教程实例： 大致就是 每个 Vue 应用都需要通过实例化 Vue 来实现。当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当属性值发生改变，html 视图也会产生相应的变化。 实例化的时候，需要绑定对应的资源（el

对于大多数单页应用程序而言，管理路由是一项必不可少的功能。随着新版本的Vue Router处于Alpha阶段，我们已经可以开始查看下一个版本的Vue中它是如何工作的。 Vue3中的许多更改都会稍微改变我们访问插件和库的方式，其中包括Vue Router。我们将结合使用 Alpha版本的Vue Router 和当前的 Vue3 Alpha 版本进行研究。 本文告诉你如何将Vue Router添加到Vue3项目中，并有一个很好的小例子！ 设置 首先，我们将使用由Evan You 发布的 Vue3 Webpack预览版 。 让我们使用 git clone https://github.com/vuejs/vue-next-webpack-preview.git 克隆仓库。 然后，要将 vue-router alpha 添加到我们的项目中，我们要修改 package.json 文件。 在我们的依赖关系中，我们想添加以下版本的 vue-router "dependencies": { "vue": "^3.0.0-alpha.10", "vue-router": "4.0.0-alpha.4" } 复制代码 现在，我们终于可以从命令行运行 npm install 来安装所有依赖项。 我们最终要做的设置是实际创建你的路由文件以及一些映射到它的视图。 在 src/ 文件夹中，我们将添加三个文件。

　　一、问题提出 　　在我们用Vue.js做移动端开发的时候，经常会遇到这样的应用场景： 　　首先，让用户看到新闻列表；然后点击新闻标题，切换到新闻详情的组件，以展示新闻详情。 　　很多应用场景都于此类似，比如先进入商品列表，点击某一个商品条目，则切换到商品详情的组件。 　　这种场景往往会碰到一个问题，当我每一次从详情组件退回到列表组件的时候，列表组件会重新发出ajax请求。考虑到下面2条原因，总觉得这么不好。 　　1.列表组件上的数据不会在短短几分钟之内就更新，完全没必要每次都发出ajax请求。这样势必降低用户体验 　　2.浪费移动设备的流量。（如果流量无限，这条可以无视） 　　总之，即使只有第1条原因，我们也应该不让它每次退回到列表页的时候都重新发出ajax请求。 　　如何解决这个问题？ 　　可以使用Vue.js自带的keep-alive 　　二、keep-alive用法 　　是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。 　　它使用的时候非常简单，示例代码如下：　　 < keep-alive > < router-view ></ router-view > <!-- 这里是会被缓存的组件 --> </ keep-alive > 　　这里需要说明的是，本示例是使用了vue-router的，所以这里的keep-alive中放了1个router