Кэш Vue для всего сайта 2: как спроектировать кеш для всего сайта

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

в предыдущемподдерживать активность кеша Vue для всего сайта: динамически удалять кеш, мы достигли在路由离开时动态移除缓存Эта функция, основанная на этом, позволяет Vue использовать кэширование по всему сайту.

Эта статья многословна и многословна, пожалуйста, прочитайте ее, прыгая, повторяя, случайным образом, лежа...

Серия 1:поддерживать активность кеша Vue для всего сайта: динамически удалять кеш

Эта статья относится к серии 2: Vue Sitewide Cache II: Как спроектировать Sitewide Cache

Серия 3:vue-router-then of Vue full site cache: передача данных между передней и задней страницами

Серия Часть 4:Vue-Router-Then: принцип реализации

предисловие

В первые дни ресурсы css и js были установлены в локальный кеш браузера, а затем маленькие значки были объединены в большие изображения, чтобы сохранить запрошенные ресурсы, и оценивался статус динамического запроса 304. Затем ajax открыл web2.0. эра, и pjax сиял.В настоящее время, с процветанием интерфейсных фреймворков, таких как vue.js, вся эта серия разработок, я думаю,提速является основным драйвером.

keep-alive

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

Keep-alive и vue-router

Поместив router-view в keep-alive, можно примерно реализовать функцию кэширования всех страниц маршрутизации.

<!-- App.vue -->
<keep-alive><router-view class="transit-view"></router-view></keep-alive>

Зачем использовать кеш

Наиболее распространенный сценарий新建订单时选择地址, новый заказ представляет собой страницу маршрутизации, и это страница маршрутизации для выбора существующего адреса пользователя, поэтому, конечно, мы надеемся, что когда пользователь вернется на страницу заказа после выбора адреса, другие данные в заказе, такие как выбранный купон будет получен.Дату можно сохранить.

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

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

Это образ мышления разных мнений, и у каждого свои идеи.Трудно сказать, кто хороший, а кто плохой.Давайте продолжим сначала обсуждать решение кэш-компонента.

Была небольшая проблема

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

Можно есть и рыбу, и медвежью лапу

我们既希望填写一半进入下一页面时能保留填写的数据，我们又希望新进入的表单是一个全新的表单页。,

другими словами,回到上一个页面时使用缓存，进入下一个页面时不使用缓存,

Другими словами,所有页面都用缓存，只在后退（回到上一页）时移除当前页缓存，这样下一次前进（进入当前页）时因为没有缓存就自然使用全新页面,

То есть до тех пор, пока реализация后退（回到上一页）时移除当前页缓存Эта функция делает это.

Определяем место на маршруте

Это идея повторного использования кеша, для достижения后退（回到上一页）时移除当前页缓存, потому что сложно динамически определять прямое и обратное поведение пользователя, поэтому у нас есть дурацкое решение: предсказать сценарий использования, чтобы согласовать иерархические отношения каждой страницы маршрутизации.

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

// 仅供参考，此处缺少路由组件定义
// router/index.js
routes: [
        {   path: '/', redirect:'/yingshou', },
        {   path: '/yingshou',                meta:{rank:1.5,isShowFooter:true},          },
        {   path: '/contract_list',           meta:{rank:1.5,isShowFooter:true},          },
        {   path: '/customer',                meta:{rank:1.5,isShowFooter:true},          },
        {   path: '/wode',                    meta:{rank:1.5,isShowFooter:true},          },
        {   path: '/yingfu',                  meta:{rank:1.5,isShowFooter:true},          },
        {   path: '/yingfu/pact_list',        meta:{rank:2.5},                            },
        {   path: '/yingfu/pact_detail',      meta:{rank:3.5},                            },
        {   path: '/yingfu/expend_view',      meta:{rank:4.5},                            },
        {   path: '/yingfu/jizhichu',         meta:{rank:5.5},                            },
        {   path: '/yingfu/select_pact',      meta:{rank:6.5},                            },
        {   path: '/yingfu/jiyingfu',         meta:{rank:7.5},                            },
    ]

Основная идея заключается в том, что при определении маршрута определяют поле ранга в металляре Page Chorite приоритета маршрута, такого как 1,5, идентифицирует первый слой, такой как домой, 2.5 обозначает второй слой, такой как страница списка продуктов, 3.5 идентификатор Слой 3 Подробная информация о продукте и так далее.

Если все на одном уровне, вы также можете использовать десятичные места, такие как 1,4 и 1.5, чтобы договориться о уровне приоритета.

Подводя итог, мы ожидаем,从第1层进入第2层是前进，从第3层回到第2层是后退。

Динамически определять и удалять кеш при переходе маршрутизации

Используйте метод Vue.mixin для перехвата события выхода из маршрута и реализации его в методе перехвата.后退时销毁页面缓存.

// main.js
Vue.mixin({
    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();
    },
});

Это нормально?

Нет, это просто решает动态移除缓存, позволяя пользователям либо войти на новую страницу, либо вернуться на старую страницу. Для первых зайти на новую страницу не составляет большой проблемы, а для вторых вернуться на старую пока не обсуждалось.

Кэш предназначен для использования?

Даже если страница маршрутизации повторно использует кэш, она повторно использует только кэшированные компоненты и данные.В реальном сценарии введите данные B из списка A, а затем введите список C. Извините, список C и список A — это одна и та же страница маршрутизации, но Будут ли данные одинаковыми? Должно ли быть то же самое?

Так что, даже если он кэшируется, данные нужно обновлять?

Похоже, мы пришли к новому выводу, данные кэшированных страниц тоже недостоверны, хлопайте, эти дни подходят к концу.

Должен быть способ.

Когда кешированный компонент используется повторно, он инициирует активированное событие, а некэшированный компонент инициирует множество событий, таких как создание монтирования при его создании, и тот же список страниц A входит в список B, потому что параметры URL-адреса отличается, событие beforeRouteUpdate также будет запущено.ссылка 1 ссылка 2 ссылка 3

Кажется, что мы можем что-то сделать, отловив эти события.

нет нет нет

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

глупый способ

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

  • Зарегистрируйте метод на всех страницах маршрутизации, называемый pageenter, независимо от ситуации, мы будем запускать этот метод.
// list.vue
    data(){
        return {
            params        : null,
        }
    },
    methods:{
        pageenter:function(){
            this.params = {
                        'uuid'                 : this.$route.query.uuid   ,
                    };
        },
    }
  • Если смотреть параметры напрямую, играть все равно невозможно (пожалуйста, подумайте, почему?), здесь можно использовать тупой метод, мы можем преобразовать его в строку и посмотреть, зафиксировать изменение строки, а затем снова вытащить данные, если Если строка не меняется, ничего не делать.
// list.vue
    computed:{
        paramsToString(){
            return JSON.stringify(this.params);
        },
    },
    watch:{
        paramsToString:function(){
            this.loadContent();
        },
    },
    methods:{
        loadContent:function(){
            //此处拉取数据
            //this.$http.get(....)
        },
    }
  • В main.js вы можете использовать Vue.mixin для перехвата трех событий, упомянутых выше, для запуска метода pageenter.
//main.js
Vue.mixin({
    /*初始化组件时，触发pageenter方法*/
    mounted:function(){
       if (this.pageenter)
       {
           this.pageenter();
       }
    },
    // /*从其他组件返回激活当前组件时*/
    activated:function(){
       if (this.pageenter)
       {
           this.pageenter();
       }
    },
    /*在同一组件中，切换路由（参数变化）时*/
    beforeRouteUpdate:function(to, from, next){
        if (this.pageenter)
        {
            this.$nextTick(()=>{
                this.pageenter();
            });
        }
        next();
    },
});

послесловие

На данный момент общая структура кэширования сайта в основном настроена.

?

Читайте дальше - Серия 3:vue-router-then of Vue full site cache: передача данных между передней и задней страницами

Оригинальный текст взят из блога Аксинга:Wanyaxing.com/blog/201807…

Категории