Как связываешь legacy код jQuery с Vue.js?

Интеграция jQuery с Vue.js: миграция legacy кода

Это реальная задача при модернизации старых приложений. Вот несколько практических подходов к постепенной миграции.

Подход 1: Vue компонент обёртка над jQuery элементом

Когда у тебя есть jQuery плагин, который нужно использовать в Vue:

// components/LegacyDatePicker.vue
<template>
  <div ref="datePickerContainer"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from "vue";
import $ from "jquery";
import "datepicker"; // jQuery плагин

interface Props {
  value: string;
}

interface Emits {
  (e: "update:value", value: string): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

const datePickerContainer = ref<HTMLDivElement>();
let $datePicker: JQuery;

onMounted(() => {
  if (!datePickerContainer.value) return;
  
  // Инициализируем jQuery плагин
  $datePicker = $(datePickerContainer.value).datepicker({
    dateFormat: "yyyy-mm-dd",
    value: props.value,
    onSelect: (dateText: string) => {
      // Пробрасываем событие в Vue
      emit("update:value", dateText);
    }
  });
});

onBeforeUnmount(() => {
  // Очищаем jQuery плагин при удалении компонента
  if ($datePicker) {
    $datePicker.datepicker("destroy");
  }
});
</script>

Подход 2: Миграция jQuery обработчиков на Vue

Вместо jQuery event delegation, используй Vue события:

// ❌ Старый jQuery подход (не работает хорошо с Vue)
$("body").on("click", ".delete-btn", function() {
  const id = $(this).data("id");
  deleteItem(id);
});

// ✅ Vue подход - типобезопасно и интегрировано
// UserItem.vue
<template>
  <li class="user-item">
    <span>{{ user.name }}</span>
    <button class="delete-btn" @click="handleDelete">Delete</button>
  </li>
</template>

<script setup lang="ts">
interface Props {
  user: { id: string; name: string };
}

interface Emits {
  (e: "delete", id: string): void;
}

defineProps<Props>();
const emit = defineEmits<Emits>();

const handleDelete = () => {
  emit("delete", props.user.id);
};
</script>

// UserList.vue
<template>
  <ul>
    <UserItem 
      v-for="user in users" 
      :key="user.id" 
      :user="user"
      @delete="deleteUser"
    />
  </ul>
</template>

<script setup lang="ts">
import { ref } from "vue";

const users = ref([...]);

const deleteUser = (id: string) => {
  users.value = users.value.filter(u => u.id !== id);
};
</script>

Подход 3: Постепенная миграция с использованием мобильности данных

Если у тебя большое jQuery приложение, мигрируй компонент за компонентом:

// old-app.js - старый jQuery код
const userData = {
  users: [],
  
  loadUsers() {
    $.get("/api/users", (data) => {
      this.users = data;
      this.renderUsers();
    });
  },
  
  renderUsers() {
    const html = this.users.map(u => `<li>${u.name}</li>`).join("");
    $("#user-list").html(html);
  }
};

// Миграция шаг 1: Извлеки логику в отдельный модуль
// api/users.ts
export async function fetchUsers(): Promise<User[]> {
  const response = await fetch("/api/users");
  return response.json();
}

// Миграция шаг 2: Создай Vue компонент
// UserList.vue
<template>
  <ul id="user-list">
    <li v-for="user in users" :key="user.id">{{ user.name }}</li>
  </ul>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { fetchUsers } from "@/api/users";

const users = ref<User[]>([]);

onMounted(async () => {
  users.value = await fetchUsers();
});
</script>

// Миграция шаг 3: Замени jQuery инициализацию на Vue приложение
// main.ts
import { createApp } from "vue";
import UserList from "@/components/UserList.vue";

const app = createApp({
  components: { UserList }
});

app.mount("#app");

Подход 4: Использование Portal для интеграции

Для сложных сценариев используй Portal (Vue 3) для рендеринга Vue компонентов в DOM элементы jQuery:

// App.vue
<template>
  <div id="legacy-app">
    <!-- jQuery элементы -->
    <div id="legacy-content"></div>
    
    <!-- Vue компонент через Portal -->
    <Teleport to="#some-jquery-container">
      <ModernVueComponent />
    </Teleport>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import ModernVueComponent from "./ModernVueComponent.vue";

onMounted(() => {
  // Инициализируем jQuery код
  $("#legacy-content").datepicker();
  $("#some-button").on("click", handleJQueryClick);
});

function handleJQueryClick() {
  // Общение между jQuery и Vue через события
  window.dispatchEvent(new CustomEvent("jquery-action", {
    detail: { action: "click" }
  }));
}
</script>

Подход 5: Custom Events для коммуникации jQuery -> Vue

Если нужна двусторонняя коммуникация:

// Слушаем jQuery события в Vue
// ModernComponent.vue
<template>
  <div>
    <p>Status: {{ status }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from "vue";

const status = ref("idle");

const handleJQueryEvent = (event: CustomEvent) => {
  status.value = event.detail.status;
};

onMounted(() => {
  window.addEventListener("jquery:statuschange", handleJQueryEvent);
});

onBeforeUnmount(() => {
  window.removeEventListener("jquery:statuschange", handleJQueryEvent);
});
</script>

// old-jquery.js
$("#some-element").on("statuschange", function(newStatus) {
  // Пробрасываем jQuery событие в Vue через CustomEvent
  window.dispatchEvent(new CustomEvent("jquery:statuschange", {
    detail: { status: newStatus }
  }));
});

Best Practices для миграции

1. Извлеки логику из jQuery кода в отдельные функции:

// ❌ Плохо - логика смешана с jQuery
$("#submit-btn").on("click", function() {
  const email = $("#email").val();
  const password = $("#password").val();
  if (email && password) {
    $.post("/login", { email, password }, (data) => {
      localStorage.setItem("token", data.token);
      window.location.href = "/dashboard";
    });
  }
});

// ✅ Хорошо - логика отделена
// services/auth.ts
export async function login(email: string, password: string) {
  const response = await fetch("/login", {
    method: "POST",
    body: JSON.stringify({ email, password })
  });
  const data = await response.json();
  localStorage.setItem("token", data.token);
  return data;
}

// После можешь использовать в Vue или jQuery

2. Никогда не смешивай jQuery DOM манипуляции с Vue:

// ❌ Очень плохо - Vue потеряет контроль над DOM
onMounted(() => {
  $(el).html("<div>Content</div>"); // jQuery изменяет DOM
  // Vue не знает об этом изменении!
});

// ✅ Всегда используй Vue для изменения DOM
<template>
  <div>Content</div>
</template>

3. Используй Composition API для обёртки jQuery плагинов:

// composables/useJQueryPlugin.ts
import { ref, onMounted, onBeforeUnmount } from "vue";
import $ from "jquery";

export function useJQueryDatePicker(selector: string) {
  const value = ref("");
  
  onMounted(() => {
    $(selector).datepicker({
      onSelect: (date: string) => {
        value.value = date;
      }
    });
  });
  
  onBeforeUnmount(() => {
    $(selector).datepicker("destroy");
  });
  
  return { value };
}

// Использование в компоненте
const { value } = useJQueryDatePicker("#datepicker");

Главное правило: мигрируй постепенно, извлекая логику из jQuery и переиспользуя её в Vue компонентах.