Практика решения проблем с кешем мобильного проекта Vue

внешний интерфейс JavaScript Vue.js

Недавно я работал над проектом мобильного терминала Vue.Я был поражен проблемой кеша.Я накопил некоторый опыт.Настоящим я записываю и обобщаю его.Quan должен быть обзором последних проблем проекта!

Сначала опишите сценарий проблемы: страница A -> страница B -> страница C. Предположим, что страница A — это страница со списком, страница B — это страница со сведениями о списке, а страница C должна управлять чем-то, что изменяет страницу B, и выполнять аналогичную операцию для отправки. Когда страница A переходит на страницу B, она должна отображать разные сведения в соответствии с разными элементами списка. При входе на C из B также должно отображаться разное содержимое в соответствии с идентификатором элемента, например идентификатором. После операции на странице C вернитесь на страницу B. и данные страницы B. меняются. В это время будет две ситуации:

  • После того, как страница C обработает данные, она вернется на страницу B, и соответствующие данные страницы B должны измениться.
  • Щелкните стрелку в верхнем левом углу страницы C, чтобы вернуться, и соответствующие данные страницы B не должны измениться. Продолжайте возвращаться на страницу списка A, изменяйте часть данных, продолжайте входить на страницу B, страница B отображает другой контент, переходите на страницу C, и страница C обновляется для отображения другого контента.

Другая ситуация возникает на странице написания писем, добавления получателей, выбора людей и продолжения добавления, контакты, добавленные ранее, должны существовать. Однако при возврате к списку рассылки со страницы создания и повторном входе на страницу создания контактные данные, добавленные ранее, больше не должны существовать.Здесь речь идет о том, как обращаться с кешем, когда использовать кеш и когда очищать кеш.

Текущая общая структура проекта выглядит следующим образом:

<template>
  <div id="app">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

Хотя официальный обеспечивает включение и исключение, что позволяет нам решить, какие компоненты используют кеш, а какие не используют кеш, но это не решает задачу динамического использования кеша, В настоящее время мой проект использует следующие два способа обрабатывать кеш:

Метод 1, использовать ли использовать идентификатор кеша

Добавьте META-информацию к каждому маршруту в файле маршрутизации Router.js, чтобы определить, следует ли использовать кеш.

meta: {
    isUseCache: false,//不使用缓存
    keepAlive: true
}

Как использовать:
A->B, B не может кэшироваться, B->A, A кэшируется.

  • (1) Страница:
beforeRouteLeave(to, from, next) {
  // 设置下一个路由的 meta
  if(to.path=='/B'){
    to.meta.isUseCache = false;
  }
  next();
},
activated(){
    if(!this.$route.meta.isUseCache){
        this.getData();
    }
}
  • (2) страница В
beforeRouteLeave(to, from, next) {
  // 设置下一个路由的 meta
  if(to.path=='/A'){
    to.meta.isUseCache = true;
  }
  next();
},
activated(){
    if(!this.$route.meta.isUseCache){
        this.getData();
    }
}

Второй способ — принудительно очистить кеш.

Этот метод найден в Интернете.После использования внутренних компонентов Vue динамическое уничтожение компонентов больше не поддерживается, и кеш всегда существует.Вы можете только начать с источника и очистить кеш.

export const removeCatch = {
  beforeRouteLeave:function(to, from, next){
    if (from && from.meta.rank && to.meta.rank && from.meta.rank>to.meta.rank)
      {//此处判断是如果返回上一层，你可以根据自己的业务更改此处的判断逻辑，酌情决定是否摧毁本层缓存。
          if (this.$vnode && this.$vnode.data.keepAlive)
          {
              if (this.$vnode.parent && this.$vnode.parent.componentInstance && this.$vnode.parent.componentInstance.cache)
              {
                  if (this.$vnode.componentOptions)
                  {
                      var key = this.$vnode.key == null
                                  ? this.$vnode.componentOptions.Ctor.cid + (this.$vnode.componentOptions.tag ? `::${this.$vnode.componentOptions.tag}` : '')
                                  : this.$vnode.key;
                      var cache = this.$vnode.parent.componentInstance.cache;
                      var keys  = this.$vnode.parent.componentInstance.keys;
                      if (cache[key])
                      {
                          if (keys.length) {
                              var index = keys.indexOf(key);
                              if (index > -1) {
                                  keys.splice(index, 1);
                              }
                          }
                          delete cache[key];
                      }
                  }
              }
          }
          this.$destroy();
      }
      next();
  }
};

Вы можете смешивать и импортировать js на страницу, которая должна очистить кеш.Оригинальная ссылка

Эпилог

Кеш движущийся конец действительно неприятно ах, вперед и назад, когда использовать кэш, кэш, когда не используется, требуют тщательного обращения, в противном случае будут неожиданные проблемы. Однако после того, как проект накопил некоторый опыт. Если есть другие тяжеловесы, имеют лучшее решение, пожалуйста, сообщите, спасибо! Опять же, иди, чтобы решить проблему, не бойся и не решите проблему, вы будете расти!

блог,Обновление синхронизации!

Категории