Vue 3 возможен ли mount по событию?

Question

[S@rK]

В процессе разработки сайта возникла задача показывать сгенерированный элимент страницы на Vue 3 по событию то есть пока не произойдет какой то event vue не должен заменять то что находится внутри тега vue-tag-name(тоже самое #app)
так как изначально там находится другой нужный контент сформированный серверной частью сайта
вот пример как приблизительно все устроено ручная сборка vue 3 + webpack в результирующем файле не должно быть дерективов vue, это не SPA или MPA просто некоторые элименты сайта реализованы на vue.

import { createApp } from 'vue';
import App from '../components/App.vue';

createApp(App).mount('vue-tag-name') // работает но заменяет сразу

var app = createApp(App);
 $(window).on('scroll', function(){
            app.mount('vue-tag-name');
    }); // не работает заменяет на пустоту но без ошибок

Comments

[Ярослав Иванов]

А смысл? Почему сразу прикрутить нельзя?

[S@rK]

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

[Антон Антон]

$(window).on('scroll', function(){
console.log('start mount');
app.mount('vue-tag-name');
console.log('end mount');
});

Да и вообще, нафига тут jq?

[S@rK]

Антон Антон, вы не совсем поняли вопрос jq ето просто пример события что vue должен отобразить сгенерированый контент по скролу клику неважно по любому событию которое я пропишу но он не вставляет сгенерированый контент если делать ето не сразу

Answer 1

[Антон Антон]

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

Comments

[S@rK]

События вызывается так как изначально элимент не пустой но после скрола сразу заменяется на пустоту

[S@rK]

$(window).on('scroll', function(){ - событие срабатывает но вставляется пустота
window.addEventListener('scroll', function() { - событие срабатывает но вставляется уже нормальный контент
спасибо за помощь

Answer 2

[profesor08]

S@rK,

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

Ну так объясни заказчику, что ранжирование сайта зависит от толщины кошелька, а не от pagespeed.

С тем-же успехом, можешь не париться с vue, с прокруткой и прочей фигней, а возвращать пустой файл если запрос идет от lighthouse, pagespeed будет зашкаливать, заказчик в восторге.

Comments

[S@rK]

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

[profesor08]

S@rK, как бы браузер передает полезные заголовки, в том числе и локализацию клиента.

$_SERVER['HTTP_ACCEPT_LANGUAGE']

[S@rK]

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