Как обмениваются данными родительский и дочерний компонент во Vue?

Кроссбраузерность Vue приложения

Обеспечение кроссбраузерности Vue приложения требует комплексного подхода, включающего настройку инструментов сборки, использование полифиллов, тестирование и соблюдение стандартов. Vue 3 требует поддержку ES2015+, что ограничивает поддержку старых браузеров.

1. Настройка Babel для транспиляции

Babel преобразует современный JavaScript в код, совместимый со старыми браузерами. Для Vue приложений необходима правильная конфигурация:

// babel.config.js
module.exports = {
  presets: [
    [
      '@vue/cli-plugin-babel/preset',
      {
        targets: {
          browsers: [
            '> 1%',
            'last 2 versions',
            'not dead',
            'IE 11' // Если нужна поддержка IE11
          ]
        }
      }
    ]
  ],
  plugins: [
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-proposal-object-rest-spread'
  ]
};

2. Использование Polyfills

Полифиллы необходимы для обеспечения функциональности, которая не поддерживается в старых браузерах:

// src/main.js
import 'core-js/stable';
import 'regenerator-runtime/runtime';

// Специфичные полифиллы
import 'intersection-observer';
import 'whatwg-fetch';

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

const app = createApp(App);
app.mount('#app');

Альтернатива - использовать @vitejs/plugin-legacy в Vite:

// vite.config.js
import legacy from '@vitejs/plugin-legacy';

export default {
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime']
    })
  ]
};

3. Проверка совместимости Features

Избегайте использования слишком новых API без полифиллов:

// ✅ Поддерживаемо везде
const items = Array.from(nodeList);
const str = ''.padStart(10, '0');

// ⚠️ Требует полифилла
const promise = Promise.all([...]);
const obj = Object.assign({}, source);

// ❌ Не поддерживается в старых браузерах
const result = array.flatMap(x => x);
const entries = Object.entries({});

4. Использование Can I Use и Browserslist

Определите целевые браузеры в .browserslistrc:

last 2 versions
> 1% in US
notdead
not IE 11

Эта конфигурация используется Babel, PostCSS и другими инструментами для автоматической оптимизации.

5. CSS Совместимость

Исползуйте PostCSS с плагинами для автопрефиксации:

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-preset-env': {
      stage: 3,
      features: {
        'nesting-rules': true
      }
    },
    autoprefixer: {
      overrideBrowserslist: ['last 3 versions', '> 1%']
    }
  }
};

Это добавит необходимые префиксы (-webkit-, -moz-, -ms-) автоматически.

6. Тестирование в разных браузерах

Используйте BrowserStack или Sauce Labs для тестирования:

// package.json
{
  "scripts": {
    "test:browsers": "vitest run",
    "test:e2e:browsers": "playwright install && playwright test"
  }
}

Настройте Playwright для тестирования нескольких браузеров:

// playwright.config.js
export default {
  use: {
    baseURL: 'http://localhost:5173'
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit', use: { ...devices['Desktop Safari'] } }
  ]
};

7. Условная загрузка компонентов

Ление загружайте компоненты, которые работают только в определённых браузерах:

// utils/browser.js
export const isIE11 = () => !!window.MSInputMethodContext && !!document.documentMode;
export const isEdge = () => /Edge/.test(navigator.userAgent);

// Component.vue
<script setup>
import { isIE11 } from '@/utils/browser';
import ModernComponent from './ModernComponent.vue';
import LegacyComponent from './LegacyComponent.vue';
</script>

<template>
  <component :is="isIE11() ? LegacyComponent : ModernComponent" />
</template>

8. Обработка ошибок и fallback'ов

// src/main.js
try {
  const feature = navigator.geolocation;
  if (!feature) {
    console.warn('Geolocation not supported');
    // Используй fallback
  }
} catch (e) {
  console.error('Error checking feature:', e);
}

// Feature detection
function supportsLocalStorage() {
  try {
    const test = '__test__';
    localStorage.setItem(test, test);
    localStorage.removeItem(test);
    return true;
  } catch (e) {
    return false;
  }
}

9. Минификация и Optimization

// vite.config.js
export default {
  build: {
    minify: 'terser',
    terserOptions: {
      compress: {
        pure_funcs: ['console.log'],
        drop_console: true
      }
    }
  }
};

Чеклист для кроссбраузерности

• Определить целевые браузеры и версии
• Установить Babel с правильными presets
• Добавить необходимые полифиллы
• Настроить PostCSS с autoprefixer
• Использовать feature detection вместо user-agent detection
• Тестировать на реальных браузерах или через BrowserStack
• Документировать минимальные требования
• Регулярно обновлять зависимости

Кроссбраузерность - это не одноразовая настройка, а постоянный процесс тестирования и оптимизации.