I am studying recently and keep a record of the problems I encountered, so I will add a little note today.
I encountered two problems in the project. Just take a simple note to record the problems I solved may not be a good solution. Welcome to suggest that I am still constantly optimizing...
The first is that when vue loads the page, it will load static resources first. At this time, the data has not been requested yet, and the user will see the static content first (the page is fixedly written to death), and the data will be rendered after a while. This experience is very poor. In fact, the solution is also very simple. It is to use the v-if in vue to determine whether the requested data is returned...
<div class="container" v-cloak>
<div v-if=''>
<in-account-msg :money-in-msg="moneyInMsg"></in-account-msg>
</div>
</div>
The v-if = '' here is to determine whether the data has been requested. If the request comes back, let it display it. If the data is not requested, let it load it, so the experience will be much better. It should also be noted here that the data source judged by v-if is the field returned by the data. If only one of the two fields exists, v-if ='a || b' can be used to determine whether the data is returned successfully. One thing to note is that you cannot directly use v-if in the component, nor can you directly judge in the root tag. It can be solved by directly nesting a div, and it does not affect the style, and only displays whether the data returns normally;
The second is that when using vuex, there is a data cache; the situation I encountered is that when clicking on the list page to enter the details page and return to the list page. When entering another details page, the data will display the previous data. At the same time, the page is loading (the data returned by the interface is relatively slow). After a while, the page will be re-rendered. Maybe I don’t have a deep understanding of vuex and haven’t solved this problem based on vuex. Although this problem has been solved in a tortuous way, it is not enough, but the problem has been solved and optimization will be done later.
In the previous solution, when entering the page, refresh the page and request data again. The code is as follows:
export const refresh = (title) => {
= title;
let iframe = ('iframe');
= require('./');
('style', 'display:none;');
let loadFn = function () {
('load', loadFn);
(iframe);
('Page Title IS ' + title);
iframe = null;
loadFn = null;
}
(iframe)
('load', loadFn);
}
But the expected results are not achieved, and the above situation will still occur... Oh my god, I'm crazy... (I feel really unhappy when I'm urging others...)
Baidu, Google, hasn't encountered this situation? I found one, and asked a question, but there was no answer. OK, it's up to me. Do it yourself, have enough food and clothing...
The idea is to define a parameter status as false. When the data is not requested, it will not be displayed. It is also used to judge in the above method, keep loading (request failed, remove loading), and when the data is returned, make status true; use $nextTick to update the data...
Post some of your own code as a reference:
<template>
<div v-if='status && '>
//The data displayed on the page </div>
</template>
<script>
export default{
data(){
return {
status：false
}
},
created(){
var _this = this;
({res =>{
_this.$nextTick(function(){
_this.status= true
});
}})
},
computed:{
...mapGetters({//The data obtained by getter}) },
methods:{
...mapActions(['setDd']) //How to get data }
}
</script>
The processing method is relatively ugly..., but it achieves the desired effect; one thing to note here is the judgment issue of v-if. (v-if='status && ') This is used and the purpose is to return data so that it can be displayed. If there is no data, a static value will be displayed, and the data will be underfind...
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.