网站设计的硬件,上海外贸公司名录,dedecms产品展示织梦模板(营销型网站),旅游订房网站开发需求文档目录
01 路由懒加载(重要)
02 axios在脚手架中的使用
03.axios的二次封装
04 组件缓存 01 路由懒加载(重要) 一次性导入会出现严重的问题 : 首屏卡顿 因为main.js中引入了router/index.js router/index.js又使用了import语句 静态的引入了每一个组件 导致了首屏卡顿 所以我…目录
01 路由懒加载(重要)
02 axios在脚手架中的使用
03.axios的二次封装
04 组件缓存 01 路由懒加载(重要) 一次性导入会出现严重的问题 : 首屏卡顿 因为main.js中引入了router/index.js router/index.js又使用了import语句 静态的引入了每一个组件 导致了首屏卡顿 所以我们建议把路由改成懒加载的方式: 怎么引入懒加载: component:()import(页面组件的路径) 表示当这个路径的path被访问的时候才执行component对应的函数 才去使用import函数动态加载这个页面组件 实际开发中 路由的component除了首页需要加载的页面以外 其他页面组件的引入 必须使用懒加载的方式 这个是vue性能优化的重要手段之一 组件也可以懒加载 components:{ 子组件标签名:()import(子组件路径) } 这个就是子组件的懒加载 用到的时候再加载 记住 但凡是import引入组件的地方都可以写成这种形式 02 axios在脚手架中的使用 在脚手架中使用axios模块的步骤: 1.npm i axios --save 2. 在main.js中引入axios import Axios from axios 将axios添加到vue的原型对象里面 Vue.prototype.$axiosAxios 3.Axios(option) 直接调用 03.axios的二次封装 脚手架自带的一个宿主环境对象 process (进程对象) env(环境) process.env.NODE_ENV 返回一个字符串 development 表示当前环境是开发环境 production表示当前环境是生产环境 axios二次封装的步骤: 1. npm i axios --save 2.在src/utils文件里面创建request.js文件 3.import Axios from axios 4.Axios 调用create 方法进行baseURL和timeout的配置 baseURL:process.env.VUE_APP_BASE_URL(在src同级新建.env.development和.env.production这两个文件) 这两个文件里面可以定义变量 随着开发或者生产环境的切换 自动读取对应后缀名的文件 这两个文件里面自定义变量名 VUE_APP开头的剩下的自定义 但是潜规则都是叫做VUE_APP_BASE_URL 修改完配置文件 一定记得重启项目!!! 5.利用service 对象设置请求拦截器和响应拦截器 6.export default service 对外暴露 7.src/api 文件夹里面创建index.js 8.index.js里面引入request import request from /utils/request 9.export const 接口方法名(data/params){ return request({ url:/剩余地址, method:get/post, data/params }) } 把每个接口都单独封装成方法 10. 页面中使用接口位置 import {接口方法名} from /api 11. 代码中 接口方法().then(data{拿到data数据}) 04 组件缓存 默认路由跳转时 组件的生命周期的变化 A跳转到B B页面的beforeCreate B页面的created B页面的beforeMount A页面的beforeDestroy A页面的destroyed B页面的mounted B返回A A页面的beforeCreate A页面的created A页面的beforeMount B页面的beforeDestroy B页面的destroyed A页面的mounted 通过上面的声明周期的变化发现每次跳转时都会把当前组件进行销毁把目标组件进行创建 如果页面反复跳转 就会反复的创建和销毁 非常消耗性能 vue性能优化之一: 需要把组件进行缓存: 使用keep-alive组件 在有组件切换显示的位置上面 套上keep-alive标签即可 组件切换显示: router-view 或者动态组件 配合keep-alive组件缓存有一对钩子函数 activated 激活 deactivated 解除激活 使用keep-alive以后生命周期函数的变化: A页面第一次加载: A页面的beforeCreate A页面的created A页面的beforeMount A页面的mounted A页面的activated B页面的第一次加载: B页面的beforeCreate B页面的created B页面的beforeMount B页面的mounted A页面的deactivated B页面的activated AB A页面的deactivated B页面的activated BA B页面的deactivated A页面的activated 如果你有接口请求需要每次页面呈现的时候都调用那么我们可以写到activated里面 这个生命周期函数第一次加载也会执行 每次呈现都会执行
