需要学会的技术栈：hightcharts，echarts，可视化项目，微信小程序
一，本地数据缓存预加载方案：用户在进入页面的时候先展示之前看到的数据，等到接口请求到数据的时候会将之前的缓存的数据替换，主要是使用了localStorage和时间戳，首次进入页面的时候使用getItem查找对应的数据，如果没找到就正常请求接口渲染页面，如果查找到了就先渲染缓存数据等待新的数据接口请求后替换，因为localstorage缓存是长久保存数据不会被自动清除的，所以需要加上时间戳让缓存的数据在一定时间内去除掉，主要方法就是在存储数据的时候加上时间，在获取数据的时候判断现在的时间减去当时存储时的时间如果小于自己设置的时间，就证明数据没有过期，就正常展示缓存的数据，如果大于设置的时间就清除缓存的数据。
二，websocket是双向通信协议，它的优点在于服务器可以主动向客户端发送数据，websocket的作用主要是能实现页面的无刷更新，项目中的期货数据展示模块是要求实时的展示期货数据的变化，然后以矩形树图的形式展现出来，这里就用到了websocket和echarts插件。 websocket事件：socket.open 连接建立时触发。 socket.message 客户端获取服务端数据触发 socket.error 通信发生错误时触发 socket.close 通信关闭时触发 websocket方法：socket.send() 发送数据给服务端 socket.close() 关闭连接
三，webpack-budile-analyzer 将项目依赖包所占资源可视化，因为浏览器不能直接识别vue项目，npm run build可以将项目打包成浏览器可以识别的文件，npm run build打包出了一个dist文件夹，放到服务器上后，用户就可以访问页面，访问页面的渲染速度和dist文件包的大小是有关系的，dist包越小，用户访问的速度就越快，这个时候就可以考虑优化dist文件包，这里是用了webpack-build-analyzer 将dist文件里的依赖包可视化，看到里面哪个模块依赖包大就可以对其进行优化，这里主要是用了cdn引入外部链接的方法来优化文件包。原理主要就是不用npm安装依赖包，使用url外部链接的方式引入依赖包从而减少包的体积，实现方式是在html根文件中引入cdn链接，之后再webpack.config.js中添加extental属性里写上对应的cdn依赖包名称。 cdn具有协商缓存特性，通过cdn的方式引入的依赖包只需要第一次引入加载，后续加载就可以直接使用依赖包缓存，大大提高了页面渲染速度。 主要引入的依赖包有echarts和lodash
四，权限问题： 说到用户鉴权首先想要beforeEach，这是路由守卫，里面有三个参数 to:表示即将去的页面,form:表示从哪个页面来。 next（）表示 允许to去往页面的操作。 首先就是设置白名单，将不需要登录就能访问的页面定义在一个数据里，然后通过includes方法判断to即将去的页面如果是白名单里的页面，就正常放行，如果不是白名单里的页面，就需要进行鉴权，首先需要判断是否带有token值，有则正常进入页面，没有就跳转到登录页登录，如果路径没有对应的组件就会跳转到404页面。 按钮鉴权的方法就是给每个按钮加上v-if判断路由权限表里的按钮对应的数据的key值是否存在，存在就为true，按钮就展示，不存在就为false让按钮消失。
五，axios封装：主要是封装了请求拦截器和相应拦截器，请求拦截器的作用就是用户向服务器发送的数据做一些处理， 这里可以做的就是将携带上token请求头，相应拦截器的作用就是对服务器向客户端返回的数据做一些处理，这里可以对返回的数据做一些解构，一般返回的数据格式是data数据体，message成功消息或失败消息和code状态码，这里就可以根据code状态码来判断数据是否成功返回，如果成功返回就只解构出data的数据体返回，如果返回失败就返回报错的信息。这样就不需要在每个页面请求数据的时候都对状态码进行判断了。
微信小程序与vue的不同点: 小程序和vue的生命周期是不一样的，常用的钩子有onLoad（打开页面只会调用一次），onShow（每次打开页面都会调用一次），onReady，onHide，onUnload。 小程序的数据绑定是{{data}} 形式。 小程序使用wx：if 和 hidden控制元素的显示和隐藏。 小程序没有双向绑定的语法糖，一般是先绑定一个value值，之后通过点击事件 使用this.setData写法将data中的值绑定到value上实现双向绑定。 小程序不能通过点击事件的括号里传参，而是需要通过绑定data-xxx属性存放参数，之后通过点击事件获取e.currentTarget.xxx.dataset.xxx获取参数。 小程序父子组件通信一般是在父组件的json文件中的usingComponents里 放子组件的组件名和路径，这样就可以直接在父组件中使用了。 小程序父子组件传值是直接将值赋给一个变量传递给子组件，之后子组件通过properties接收传递的值。 子组件向父组件传值： this.triggerEvent('myevent', myEventDetail) //myevent自定义名称事件，父组件使用。
