keep-alive、vue真机测试、vue打包上线流程、异步组件、滚动行为

今日总结：

1. keep-alive 用法和坑点
2. vue 真机测试要点
3. 打包上线流程
4. 异步组件的使用场景
5. 全局事件的解绑
6. vue中的滚动行为

keep-alive 的用法和坑点

当我们使用路由切换多个页面时，每次都会重新请求一次数据，这样会造成页面性能的损耗，那么使用keep-alive组件包裹之后，就只会在第一次请求，并且缓存起来，往后再次切换到该页面时，不会重新发送请求
在main.js 中

Vue keep-alive 浏览器缓存中 可以使用exclude=“组件名” 可以选择不想要缓存的组件

使用keep-alive后事件发生异常

注意：使用exclude 之后 滚动事件等失效了、
原因：keep-alive 中使用了 exclude="Detail" 后就不执行activated生命周期的钩子
解决：把方法放在mounted中调用

真机测试

当我们做完一个迭代的任务是可能需要在真机上测试
本地地址：http://192.168.0.106
Webpack 中 默认不支持 通过 ip地址访问
通过更改pagepack.json

重启后，便可以通过本地的地址访问，这样一来，就可以在手机上输入该地址进行测试了

可能出现白屏，或者不能访问

可能出现访问时白屏效果
1.可能浏览器默认不支持promise行为
解决这个问题：

cnpm install babel-polyfill --save

它会判断如果浏览器不支持es6的行为，会自动兼容
接着在main.js中引入

2.不能访问，可能是手机浏览器原因，换个浏览器，或者手机本身不支持

打包上线流程

执行 cnpm run build
会出现一个dist文件夹，将这个文件夹中的内容放在服务器中目录下即可
如果你想把dist文件夹中的内容放入名为project的文件下，可以这样做

改完之后重新 npm run build

就变成在project下访问了

vue 中异步组件

因为是单页应用，所以在首页出现时，就会请求所有的静态文件，但随着项目越来越庞大，就不能一次请求完所有数据，这样使性能降低
使用异步组件，就能实现按需加载js等文件，提升性能
在route/index.js中

这样一来，当路由切换时，就会加载该组件的js文件，提升了性能

同时组件之间相互嵌套时也能使用异步加载方式

使用异步加载，仅在app.js 很大时，至少多余1M，就是在项目很庞大时才使用，否则适得其反。

全局事件的解绑

利用生命周期钩子

因为是但单页应用 如果不解绑 那么在vue中任何组件中都会执行这个函数
activated 是每次页面展示的时候就会执行
deactivated 页面被隐藏的时候就会执行

Vue 中调用自身组件实现递归

Vue 中 的 滚动行为

参考官方文档:https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html#异步滚动

在route/index.js