situation

общий сценарий,

Дома-->вперед, продолжатьСписок-->вперед, продолжатьстраница подробностей, страница подробностей-->вернутьДома-->вернутьСписок

мы надеемся,

На странице сведений-->вернутьКогда используется страница списка, состояние страницы кэшируется, и нет необходимости повторно запрашивать данные, что улучшает взаимодействие с пользователем.

Со страницы списка-->вернутьКогда вы находитесь на домашней странице, выйдите из страницы списка, чтобы получить последние данные при входе на другую страницу списка.

task

Давайте сегодня выполним это требование.

В мире кода никогда не существует более одного способа решить проблему.

Например, чтобы найти индекс значения из массива:

Вы можете использовать самый простой цикл for для обхода, вы также можете использовать инструментальные функции, такие как indexOf, или вы можете использовать более семантические функции более высокого порядка, такие как findIndex forEach для обхода.

Я дал ссылку на ряд статей, поднялся на официальные документы, после того, как, нашел несколько способов, здесь, давайте проанализируем один за другим.

let's begin, Давайте начнем. 🙌

1. люди, которые решают потребности

   😂 эмм... , по сравнению с нашей жизнью, возможно, код будет лучше контролироваться.

   Программисты живут в царстве собственного воображения

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

   -- Лэй Цзюнь (правильно, Лэй Цзюнь из Xiaomi)

   Я согласен с заявлением Лэй Цзюня.

   Редко можно найти что-то, что вы любите в жизни, если вы любите код и сосредоточены на нем,

   один день,

   Это окупит вас всевозможными способами: зарплатой, признанием, достижениями, людьми, которые развиваются вместе с вами, людьми, которые резонируют с вашим сердцем.

   Если ты расцветешь, прилетят бабочки. Давайте все подбодрим друг друга (Если вы сможете обмануть одного, чтобы он поверил, то одной скульптурой из песка станет меньше, а я буду хватать девушку🤣)

2. Спальное белье ♂ люди, которые его просят

   😂эмм..., глядя на лицо в зеркало, я не должен получить от лица удобства в этой жизни...

3. keep-alive

   keep-aliveдаVueПредоставленный абстрактный компонент, в основном используемый для сохранения состояния компонента или предотвращения повторного рендеринга.

   

   ноkeep-aliveВсе компоненты, которые он обертывает, будут кэшированы.

action

Разбиваем требования на 2 шага для достижения

1. Различайте компоненты представления, которые нужно кэшировать, и те, которые не нужно кэшировать.

Идея заключается в следующем:

1. Написать 2router-viewЭкспорт

<keep-alive>
    <!-- 需要缓存的视图组件 -->
  <router-view v-if="$route.meta.keepAlive">
  </router-view>
</keep-alive>

<!-- 不需要缓存的视图组件 -->
<router-view v-if="!$route.meta.keepAlive">
</router-view>

2. существуетRouterОпределите компоненты представления, которые необходимо кэшировать в

new Router({
    routes: [
        {
            path: '/',
            name: 'index',
            component: () => import('./views/keep-alive/index.vue'),
            meta: {
                deepth: 0.5
            }
        },
        {
            path: '/list',
            name: 'list',
            component: () => import('./views/keep-alive/list.vue'),
            meta: {
                deepth: 1
                keepAlive: true //需要被缓存
            }
        },
        {
            path: '/detail',
            name: 'detail',
            component: () => import('./views/keep-alive/detail.vue'),
            meta: {
                deepth: 2
            }
        }
    ]
})

2. Поддержание активности по требованию

Начнем с API, предоставленного официальной документацией,

keep-aliveкомпонент, если установленinclude, только сincludeСовпадающие компоненты кэшируются,

Итак, идея состоит в том, чтобы динамически изменятьincludeМассивы для реализации кэширования по требованию.

<keep-alive :include="include">
    <!-- 需要缓存的视图组件 -->
  <router-view v-if="$route.meta.keepAlive">
  </router-view>
</keep-alive>

<!-- 不需要缓存的视图组件 -->
<router-view v-if="!$route.meta.keepAlive">
</router-view>

Давайте послушаем изменения маршрута в app.vue,

export default {
  name: "app",
  data: () => ({
    include: []
  }),
  watch: {
    $route(to, from) {
      //如果 要 to(进入) 的页面是需要 keepAlive 缓存的，把 name push 进 include数组
      if (to.meta.keepAlive) {
        !this.include.includes(to.name) && this.include.push(to.name);
      }
      //如果 要 form(离开) 的页面是 keepAlive缓存的，
      //再根据 deepth 来判断是前进还是后退
      //如果是后退
      if (from.meta.keepAlive && to.meta.deepth < from.meta.deepth) {
        var index = this.include.indexOf(from.name);
        index !== -1 && this.include.splice(index, 1);
      }
    }
  }
};

должен быть в курсе

keep-aliveКомпонент, который необходимо обернуть, имеет атрибут имени,

в нашем коде вышеpushа такжеspliceдаrouterизname.

Поэтому рекомендуется, чтобы выrouteизnameнастройки свойств иrouteвести перепискуcomponentизnameустановить на то же самое.

result

Давайте подтвердим наши результаты

существуетvue-devtoolВ сером компоненте он представляет компонент, который находится в состоянии кеша, обратите внимание на наблюдениеlistИзменение.

напиши в конце

1. На летуkeep-alive, в инете есть способы, модификациейrouteв конфигурацииmetaвнутреннийkeepAliveценность для достижения.

Изменить напрямуюmetaМожет появиться значение приведенной выше картинки, всегда есть кешированный список в keep-alive, нормальныйrotuer-viewесть также один,

Воспроизведение этой проблемы занимает много времени, и заинтересованные друзья могут сами забраться в яму.

2. Другой способ — напрямую уничтожить компонент, вызвав this.$destory(), когда компонент вида keep-alive выходит из маршрутизатора, что предотвратит кеширование компонента.Эта ошибка упоминается в официальном выпуске.

использованная литература

официальный выпуск

Проект Vue настраивает кеш страниц глобально, чтобы реализовать кеш чтения по запросу.

Об анимации

Спасибо за ваши лайки и ответы, я думаю, что многие люди захотят поделиться здесь исходным кодом демо.

Потому что моя компания еще не имеет этого, проект Vue дает мне много власти. Когда я написал демонстрацию, я не думал о капсулировании и оптимизации анимации.

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

Исходная ссылка

Для некоторого анализа демонстрационной анимации вы можете посмотреть мои первые 2 статьи.