Как очистить глобальные слушатели событий, интервалы и сторонние библиотеки в Vue-компонентах

В идеале Vue-компоненты представляют собой самодостаточные части пользовательского интерфейса без каких-либо заметных побочных эффектов для объектов за пределами области действия данного элемента. Но, к сожалению, это не всегда возможно. Например, иногда нам нужно связать глобальных слушателей событий, использовать setInterval или инициализировать определенную стороннюю библиотеку внутри компонента.

// Vue 3
export default defineComponent({
  name: 'SomeComponent',
  setup() {
    // Global event listener
    document.body.addEventListener('click', () => {
      // do something expensive ...
    }, { capture: true });
    
    // Interval
    setInterval(() => {
      // do something expensive ...
    }, 2000);
    
    // Third-party library
    let flatpickrElement = ref(null);
    onMounted(() => {
      flatpickr(flatpickrElement.value);
    });
    
    // ...
  },
});

// Vue 2
export default {
  name: 'SomeComponent',
  created() {
    // Global event listener
    document.body.addEventListener('click', () => {
      // do something expensive ...
    }, { capture: true });
    
    // Interval
    setInterval(() => {
      // do something expensive ...
    }, 2000);
  },
  mounted() {
    // Third-party library
    flatpickr(this.$refs.flatpickrElement);
  },
};

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

Удаление глобальных слушателей событий, очистка интервалов и сторонних библиотек

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

// Vue 3
export default defineComponent({
  name: 'SomeComponent',
  setup() {
    // Global event listener
    let options = { capture: true };
    let callback = () => {
      // do something expensive ...
    };
    document.body.addEventListener('click', callback, options);
    onUnmounted(() => document.body.removeEventListener('click', callback, options));
    
    // Interval
    let intervalId = setInterval(() => {
      // do something expensive ...
    }, 2000);
    onUnmounted(() => clearInterval(intervalId));
    
    // Third-party library
    let flatpickrElement = ref(null);
    let flatpickrInstance;
    onMounted(() => {
      flatpickrInstance = flatpickr(flatpickrElement.value);
    });
    onUnmounted(() => flatpickrInstance.destroy());
    
    // ...
  },
});

// Vue 2
export default {
  name: 'SomeComponent',
  created() {
    // Global event listener
    let options = { capture: true };
    let callback = () => {
      // do something expensive ...
    };
    document.body.addEventListener('click', callback, options);
    this.$once('hook:beforeDestroy', () => document.body.removeEventListener('click', callback, options));
    
    // Interval
    let intervalId = setInterval(() => {
      // do something expensive ...
    }, 2000);
    this.$once('hook:beforeDestroy', () => clearInterval(intervalId));
    
    // Third-party library
    let flatpickrInstance;
    this.$once('hook:mounted', () => {
      flatpickrInstance = flatpickr(this.$refs.flatpickrElement);
    });
    this.$once('hook:beforeDestroy', () => flatpickrInstance.destroy());
  },
};

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

Хуки beforeDestroy и onUnmounted в тестах @vue/test-utils

Один из моих коллег обнаружил, что при тестировании компонентов с помощью замечательного пакета @vue/test-utils хуки beforeDestroy и onUnmounted не вызываются после теста! Так и задумано, хотя я не предполагал этого. В большинстве случаев это не проблема, но в иногда такое может привести к неожиданному поведению, когда тест-кейсы будут мешать друг другу из-за загрязненной глобальной области видимости.

test('It should make magic happen.', () => {
  const wrapper = mount(SomeComponent);

  // ...

  expect(magicHappened).toBe(true);
  // Vue 3.
  wrapper.unmount();
  // Vue 2.
  wrapper.destroy();
});

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

Я считаю лучшей практикой обертывание сторонних зависимостей, и @vue/test-utils не является исключением. Это позволяет нам установить параметры по умолчанию, которые целесообразно использовать для нашего приложения в глобальном масштабе.

// Vue 3
// test/utils.js
import { merge } from 'lodash';
import {
  mount as vueTestUtilsMount,
} from '@vue/test-utils';

let defaultOptions = {
  global: {
    mocks: {
      // Mocked plugins
      $t: input => input,
    },
  },
  // ...
};

export function mount(component, customOptions = {}) {
  let options = merge({}, defaultOptions, customOptions);
  return vueTestUtilsMount(component, options);
}

Более того, наличие кастомного модуля-обертки для @vue/test-utils дает нам идеальное место для настройки глобального поведения, подобного этому. К счастью, в @vue/test-utils для Vue 2 есть встроенная хелпер-функция, которая позволяет очень просто вызвать хук beforeDestroy для каждого компонента, инициализированного во время тестирования.

// Vue 2
// test/utils.js
import { merge } from 'lodash';
import {
  mount as vueTestUtilsMount,
  enableAutoDestroy,
} from '@vue/test-utils';

// See: https://vue-test-utils.vuejs.org/api/#enableautodestroy-hook
enableAutoDestroy(afterEach);

let defaultOptions = {
  mocks: {
    // Mocked plugins
    $t: input => input,
  },
  // ...
};

export function mount(component, customOptions = {}) {
  let options = merge({}, defaultOptions, customOptions);
  return vueTestUtilsMount(component, options);
}

К сожалению, этот хук, похоже, был удален в @vue/test-utils для Vue 3. Поэтому нам нужно имплементировать данную функциональность самостоятельно.

// Vue 3
// test/utils.js
import { merge } from 'lodash';
import {
  mount as vueTestUtilsMount,
} from '@vue/test-utils';

let defaultOptions = {
  global: {
    mocks: {
      // Mocked plugins
      $t: input => input,
    },
  },
  // ...
};

let wrappers = new Set();
afterEach(() => {
  wrappers.forEach(wrapper => wrapper.unmount());
  wrappers.clear();
});

export function mount(component, customOptions = {}) {
  let options = merge({}, defaultOptions, customOptions);
  let wrapper = vueTestUtilsMount(component, options);
  wrappers.add(wrapper);

  return wrapper;
}

Подведение итогов

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

---

В любом приложении среднего размера разработчик сталкивается с задачей централизованного управления стейтом.В современном Vue 3 мы можем это делать и без Vuex, полагаясь только на hooks + provide/inject. Приглашаем на открытый урок «Сравнение стейт менеджеров — Redux vs Vuex vs новый — Pinua», на котором рассмотрим плюсы и минусы такого подхода в реальном приложении.Также в сообществе широко обсуждается упрощённый стейт-менеджер под названием Pinya. На занятии установим его и научимся пользоваться. Регистрация для всех желающих доступна по ссылке.