过渡动画

过渡动画前提：组件元素务必要有v-if|v-show指令才可以进行过渡动画 开发Search模块中的typeNav商品分类菜单（过渡动画效果）

vue中路由跳转传数据问题

Vue在路由切换的时候会销毁旧路由。 我们在三级列表全局组件TypeNav中的mounted进行了请求一次商品分类列表数据。 由于Vue在路由切换的时候会销毁旧路由，当我们再次使用三级列表全局组件时还会发一次请求。 当我们在包含三级列表全局组件的不同组件之间进行切换时，都会进行一次信息请求。 最先执行main.js文件，然后是App.vue,唯一的根组件，只会执行一次，根组件的mounted只会执行一次，为了让在路由跳转的时候数据只请求一次，比如Home组件向Search路由跳转的时候，三级联动组件中的getCategoryList不应重复发送数据，所以应该将请求放在App.vue中的mounted中，虽然main.js也是只执行一次，但是不可以放在main.js中。因为只有组件的身上才会有$store属性。 main.js不是一个组件，是一个js文件，this指向undefined. 放在App中表示TypeNav在用数据之前，仓库早已经有了数据，并且只发送一次。

合并params和query参数

mockjs模拟数据

生成随机数据，拦截Ajax请求 正常来说前端向后端服务器发送请求要数据，后端收到请求会回复，但是mock并没有向后端服务器发送请求，mock在前台模拟数据自己玩耍。浏览器不会让Ajax请求发送到服务器，mock用来拦截前端ajax请求，返回我么们自定义的数据用于测试前端接口。将不同的数据类型封装为不同的json文件，创建mockServer.js文件。

安装mock

指令：cnpm install --save mockjs 轮播图和家用电器模块

获取banner数据

Swiper的使用

swiper插件：经常用于制作轮播图（PC端|移动端也可以使用） 这里注意异步获取数据时，会出现无法加载轮播图的问题。 swiper使用步骤： 1.安装插件 cnpm install --save swiper 2.引入相应的依赖包（在需要用到轮播图的组件上引入）

3.页面中的结构务必要有，如果没有不能操作DOM.

4.初始化swiper实例。给轮播图添加动态效果。

解决方案一：在swiper实例外面加一个定时器，可以解决异步数据未加载完成，swiper实例就开始初始化问题，但是如果使用定时器，每隔一秒轮播图才可以动态展示，不够完美。 解决方案二：使用watch监听，但是实现不了 最完美的解决方案： 使用watch+this. nextTick官方介绍：this.nextTick 官方介绍：this. nextTick官方介绍：this.nextTick它会将回调延迟到下次 DOM 更新循环之后执行（循环就是这里的v-for）。 个人理解：无非是等我们页面中的结构都有了再去执行回调函数。 注意：之前我们在学习watch时，一般都是监听的定义在data中的属性，但是我们这里是监听的computed中的属性，这样也是完全可以的，并且如果你的业务数据也是从store中通过computed动态获取的，也需要watch监听数据变化执行相应回调函数，完全可以模仿上面的写法

父子组件通信

第一次书写Swiper的时候：在mounted当中书写是不可以的，但是为什么现在这里可以啦！ //第一次书写轮播图的时候，是在当前组件内部发请求、动态渲染解构【前台至少服务器数据需要回来】，因此当年的写法在这里不行 //现在的这种写法为什么可以：因为请求是父组件发的，父组件通过props传递过来的，而且结构都已经有了的情况下执行mounted //v-for是惰性的，只有数据已经到了才会执行，所以数据已经到了也执行了，子组件就肯定会拿到数据并且遍历完了。

将轮播图模块提取为公共组件

由于listContainer组件和floor组件中的轮播图书写方式有所不同，一个使用监听属性+nextTick,另一个使用在mounted中挂载，如果提取为全局公共组件，需要书写方式一致，因此需要将floor组件改成使用监听属性+nextTick。

更改细节

父组件给子组件Floor传递数据,名字为list.

监听属性的对象写法： 结果控制台并没有输出，原因是:list就没有更改过，数据是父组件给子组件的，给的时候就是一个对象list,里面已经存好东西，从来没有发生过变化，因此这样书写是监听不到的。

解决方式：添加immediate立即监听属性

至于为什么打印两次：因为有两个Floor组件

最终解决方式：watch+立即监听+$nextTick+swiper实例

将listContainer组件中也添加立即监听属性，此时两个组件书写方式一模一样，就可以提取为全局组件了。提取到components文件夹中，命名为Carousel. 需要将轮播图的结构、样式提取出来，swiper引入地方改成全局组件Carousel,

全局组件需要回到入口文件main.js注册一次,

在子组件中使用listContainer中使用：

在子组件floor中使用：

Search模块的开发

步骤：

1.先静态页面+静态组件拆分出来

2.发请求（API）

3.vuex(三连环）

4.组件获取仓库数据，动态展示数据