Запретить выполнение jQuery внутри сгенерированного кода VueJS

Question

Я работаю над заменой jQuery на VueJS, но мой старый код jQuery все еще выполняется на сгенерированном коде VueJS.

Есть способ предотвратить выполнение кода jQuery для кода VueJS?

Я не могу просто отключить jQuery на странице VueJS, потому что некоторая часть страницы все еще нуждается в jQuery.

Я думаю, что я должен проверить, что HTML имеет атрибут data-v-xxxxx, а затем предотвратить выполнение jQuery на нем.

Я не нахожу способ предотвратить выполнение jQuery для некоторых тегов.

Это выполнимо или мне нужно найти другой путь?

Answer 1

Не глядя на ваше приложение, очень сложно предложить решение. Тем не мение вот дубль.

Предположим, ваш старый HTML / jQuery структурирован следующим образом:

    <div class="mainDiv">
        <header>
        <!-- Some complicated HTML for the header !-->
        </header>

        <!-- Rest of the app !-->
        <div class="someContainer"></div>

    </div>

Предполагая, что вы начали рефакторинг заголовка как компонента vueJs, вы можете попробовать изолировать это от jQuery с помощью селекторов CSS и делегирования событий.

Селектор CSS позволит вам выбирать элементы только внутри определенных элементов.

    // before
    const $root = $(".mainDiv");

    // after
    const $root = $(".someContainer");

    // select an element inside the new root
    $root.find("p")
    // catch all clicks inside this root.
    $root.on("click", e => {});

То, что вы могли бы сделать, хотя я не буду рекомендовать, это обходит новую версию от объекта jQuery, который уже предварительно выбрал правильный корень.

Например, если у вашего приложения есть $("selector").click() везде в вашем приложение, вы можете затем псевдоним глобального $ для новой функции:

    jQuery.noConflict(); // will restore the old $ global var
    const $root = jQuery(".someContainer");
    // very basic and incomplete proposal
    const $ = function (...args) {
        return $root.find.apply($root, args);
    };
    window.$ = $; // make it globally available.