然后1、全局使用引入的变量问题
2、echarts必须在mounted函数里面初始化
3、在发送请求的时候,携带的参数应该用qs.stringify(参数是json串)的方式
4、在定义了全局数据接口地址的时候,发起axios请求,应该屏蔽接口地址,只需要写接口路径即可。
5、在企业微信认证的时候,不方便调试可以将数据展示在前端页面上,或者使用vconsole插件,来替代console.log打印。
6、axios请求,在开发环境(内网上)必须对应具体的内网ip接口。在外网上,必须对应外网ip接口。否则请求会拿不到数据
7、在做用户权限判断的适合,要结合页面引用的地址,来解析url参数
8、合理使用mixins来复用数据。
9、合理使用window.localStorage.setItem和window.localStorage.getItem来存储/读取数据
10、加入定时器不停刷新页面显示数据。
先是定义了定时器:
data() {
return {
mytime: null,//定时器
mytimeout: 1000 * 60,//一分钟刷新一次,60000毫秒
}
},
然后在页面创建时加入了定时器
async created() {
// 显示loading
this.$store.commit(`app/${SET_LOADING}`, true)
// this.dept_name = this.$route.query.dept_name || '全院'
// 设置接口参数dept_name
this.dept_name = window.localStorage.getItem('dept_name')
// 获取日期列表
let rqlb = await this.getDateList()
// 获取最新日期数据(如果传入了时间参数,就获取时间参数的接口数据。否则获取接口中rqlb.statistical_date,即含有数据的最大时间)
if (this.$route.query.param_date) {
await this.init(dayjs(dateReplace(this.$route.query.param_date)).format('YYYY-MM-DD'))
that.mytime =
await setInterval(function() {
setTimeout(that.refreshData(dayjs(dateReplace(this.$route.query.param_date)).format('YYYY-MM-DD')), 0)
},
that.mytimeout)
this.$once('hook:beforeDestroy', () => {
clearInterval(this.mytime)
})
} else {
await this.init(rqlb[rqlb.length - 1].statistical_date)
// let mytimer=
that.mytime =
await setInterval(function() {
setTimeout(that.refreshData(rqlb[rqlb.length - 1].statistical_date), 0)
},
that.mytimeout)
this.$once('hook:beforeDestroy', () => {
clearInterval(this.mytime)
})
}
},
接着想要在 beforeDestroy周期函数中清除定时器
beforeDestroy() {
clearInterval(this.mytime)
},
发现并不能清除掉。
百思不得其解,仔细检查路由也跳转了,按道理页面已经被销毁了,所以应该进入了 beforeDestroy周期函数,定时器就应该被清除了。
原来,定时器在 beforeDestroy周期函数没被清除,是因为项目的页面启用了keep-alive缓存。
<div class="main-layout">
<div class="main-layout-container">
<keep-alive>
<router-view/>
</keep-alive>
<!-- 版权 -->
<copy-right></copy-right>
</div>
<!--为了保证默认样式参数(如fixed="true")不被覆盖,需要手动指定样式效果。-->
<van-tabbar v-model="active" active-color="#00BEC8" inactive-color="#999999" @change="change"
style="position:fixed!important">
<van-tabbar-item v-for="item in tabbar" :key="item.name">
<span>{{ item.desc }}</span>
<template #icon="props">
<img class="tabbar-icon-img" :src="props.active ? item.active : item.inactive" alt=""/>
</template>
</van-tabbar-item>
</van-tabbar>
</div>
在这样的情况下,想要清除定时器,需要在deactivated函数中完成!
deactivated() {
clearInterval(this.mytime)
},
接着,由于清除了定时器,如果还需要在又一次进入到页面中启用定时器的话,需要在activated函数中,先置空定时器,再启用定时器,否则可能会出现冲突!
async activated() {
//每次调用定时器前需要先清除定时器。防止同一个出现两次
clearInterval(this.mytime)
// 获取最新日期数据(如果传入了时间参数,就获取时间参数的接口数据。否则获取接口中rqlb.statistical_date,即含有数据的最大时间)
let that = this
// 设置接口参数dept_name
this.dept_name = window.localStorage.getItem('dept_name')
// 获取日期列表
let rqlb = await this.getDateList()
if (this.$route.query.param_date) {
await this.init(dayjs(dateReplace(this.$route.query.param_date)).format('YYYY-MM-DD'))
that.mytime =
await setInterval(function() {
setTimeout(that.refreshData(dayjs(dateReplace(this.$route.query.param_date)).format('YYYY-MM-DD')), 0)
},
that.mytimeout)
this.$once('hook:beforeDestroy', () => {
clearInterval(this.mytime)
})
} else {
await this.init(rqlb[rqlb.length - 1].statistical_date)
// let mytimer=
that.mytime =
await setInterval(function() {
setTimeout(that.refreshData(rqlb[rqlb.length - 1].statistical_date), 0)
},
that.mytimeout)
this.$once('hook:beforeDestroy', () => {
clearInterval(this.mytime)
})
}
},
<div class="main-layout">
<div class="main-layout-container">
<keep-alive>
<router-view/>
</keep-alive>
<!-- 版权 -->
<copy-right></copy-right>
</div>
<!--为了保证默认样式参数(如fixed="true")不被覆盖,需要手动指定样式效果。-->
<van-tabbar v-model="active" active-color="#00BEC8" inactive-color="#999999" @change="change"
style="position:fixed!important">
<van-tabbar-item v-for="item in tabbar" :key="item.name">
<span>{{ item.desc }}</span>
<template #icon="props">
<img class="tabbar-icon-img" :src="props.active ? item.active : item.inactive" alt=""/>
</template>
</van-tabbar-item>
</van-tabbar>
</div>
总结:
vue的简单使用可以轻松达到,但是要出神入化,还有很多地方需要深入学习和实践。