11 основ JavaScript для разработчиков Vue

Время на прочтение статьи
На чтение7 мин
Дата обновления статьи
Обновлено
Просмотров статьи
Просмотров

Изучите 11 ключевых основ JavaScript, необходимых для успешной разработки на Vue.

Начните с основ

С появлением ИИ и некоторых влиятельных лиц в области технологий, похоже, многие пропускают основы перед использованием фреймворка в стране Javascript. Понимание основных концепций JavaScript имеет решающее значение, это как научиться ходить, прежде чем бегать. Когда я получил эту новую работу и мне нужно было хорошо разбираться в Vue, я потратил время на то, чтобы просмотреть эти JavaScript, чтобы иметь эффективный подход к разработке Vue 3, я понимаю и могу использовать React ... но это НЕ мой любимый фреймворк, это тема для другого обсуждения. Вот почему эти основы важны:

Переменные и типы данных

  • Почему это важно : Система реактивности Vue 3 во многом зависит от правильного объявления переменных.
  • API композиции требует понимания const рефов и реактивных объектов.
  • Распознавание типов помогает при рендеринге шаблонов Vue3 и проверке свойств.
const count = ref(0)
const user = reactive({
  name: 'John',
  age: 30
})

Шаблонные литералы

  • Почему это важно : Это важно для выражений шаблонов Vue3 и интерполяции строк.
  • Он широко используется в вычисляемых свойствах и методах.
  • Шаблонные литералы могут быть полезны для динамических шаблонов компонентов и значений свойств.
const greeting = computed(() => `Hello, ${user.name}!`)

Стрелочные функции

  • Почему это важно : Критически важно для Composition API Vue 3.
  • Используется в setup() функциях, вычисляемых свойствах и наблюдателях.
  • Необходим для поддержания правильного this связывания методов.
const doubleCount = computed(() => count.value * 2)
watch(() => user.name, (newValue, oldValue) => {
  console.log(`Name changed from ${oldValue} to ${newValue}`)
})

Объекты и деструктуризация объектов

  • Почему это важно : Основополагающий элемент для работы с реактивными объектами Vue.
  • Требуется для деклараций свойств компонентов и источников.
  • Необходим для деструктуризации setup() возвратов.
export default {
  setup(props, { emit }) {
    const { title, description } = props
    return { title, description }
  }
}

Массивы и методы массивов

  • Почему это важно : Критически важно для рендеринга списков с помощью v-for.
  • Необходим для реактивной обработки данных.
  • Используется в вычисляемых свойствах для преобразования данных.
<template>
  <ul>
    <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script setup>
const items = ref([/* ... */])
const filteredItems = computed(() => 
  items.value.filter(item => item.isActive)
)
</script>

Promises и async/await

  • Почему это важно : имеет решающее значение для загрузки данных setup().
  • Требуется для асинхронных операций компонентов.
  • Необходим для хуков и наблюдателей жизненного цикла.
import { onMounted } from 'vue'
export default {
  async setup() {
    const data = ref(null)

    onMounted(async () => {
      data.value = await fetchData()
    })
    return { data }
  }
}

Модули и экспорты

  • Почему это важно : имеет основополагающее значение для организации компонентов.
  • Требуется для компонуемых объектов и плагинов.
  • Необходим для поддержания чистоты архитектуры.
// useCounter.js
import { ref } from 'vue'

export function useCounter() {
  const count = ref(0)
  const increment = () => count.value++
  return { count, increment }
}

// Component.vue
import { useCounter } from './useCounter'

export default {
  setup() {
    const { count, increment } = useCounter()
    return { count, increment }
  }
}

Классы и объектно-ориентированные концепции

  • Почему это важно : Полезно для понимания наследования компонентов.
  • Используется в реализациях пользовательских директив.
  • Ценно для комплексного государственного управления.
class BaseComponent {
  constructor(name) {
    this.name = name
  }

  sayHello() {
    console.log(`Hello from ${this.name}`)
  }
}

class SpecialComponent extends BaseComponent {
  constructor(name, special) {
    super(name)
    this.special = special
  }
}

Optional Chaining

  • Почему это важно : Необходимо для безопасного доступа к объектам в шаблонах.
  • Полезно в вычисляемых свойствах.
  • Полезно для обработки асинхронных состояний данных.
<template>
  <div>{{ user?.profile?.name }}</div>
</template>

<script setup>
const user = ref(null)
const userName = computed(() => user.value?.profile?.name ?? 'Guest')
</script>

Event Handling (Обработка событий)

  • Почему это важно : Критически важно для коммуникации компонентов.
  • Требуется для управления событиями DOM.
  • Необходим для реализации пользовательских событий.
<template>
  <button @click="handleClick">Click me</button>
</template>

<script setup>
import { defineEmits } from 'vue'
const emit = defineEmits(['custom-event'])

function handleClick() {
  emit('custom-event', { data: 'Some data' })
}
</script>

Error Handling (Обработка ошибок)

  • Почему это важно : Важно для границ погрешности компонентов.
  • Критически важно для вызовов API и асинхронных операций.
  • Необходимо для поддержания стабильности приложения.
import { onErrorCaptured } from 'vue'

export default {
  setup() {
    onErrorCaptured((error, instance, info) => {
      console.error('Captured error:', error, instance, info)
      // Handle or report error
      return false // Prevent error from propagating further
    })

    async function fetchData() {
      try {
        const response = await api.getData()
        // Process data
      } catch (error) {
        console.error('Error fetching data:', error)
        // Handle error (e.g., show user-friendly message)
      }
    }

    return { fetchData }
  }
}

Эти фрагменты кода демонстрируют практическое применение каждой концепции в контексте разработки Vue 3, предоставляя разработчикам конкретные примеры для понимания и применения этих фундаментальных навыков JavaScript.

Практическое применение основных концепций JavaScript

Чтобы проиллюстрировать, как эти основные концепции JavaScript используются в широко используемых сценариях для начинающих, давайте рассмотрим три мини-проекта: приложение погоды, средство смены цвета фона и приложение todo. Эти примеры продемонстрируют практическое применение обсуждаемых нами концепций.

Приложение «Погода»

const apiKey = 'YOUR_API_KEY';
const cityInput = document.getElementById('cityInput');
const getWeatherBtn = document.getElementById('getWeatherBtn');
const weatherInfo = document.getElementById('weatherInfo');

// Async function declaration
async function getWeather(city) {
  try {
    // Async/await for API call
    const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`);
    // Async/await for parsing JSON
    const data = await response.json();

    // Template literal for string interpolation
    // DOM manipulation
    weatherInfo.innerHTML = `
      <h2>${data.name}</h2>
      <p>Temperature: ${data.main.temp}°C</p>
      <p>Description: ${data.weather.description}</p>
    `;
  } catch (error) {
    // Error handling
    console.error('Error fetching weather data:', error);
    weatherInfo.innerHTML = '<p>Failed to fetch weather data. Please try again.</p>';
  }
}

// Event listener
getWeatherBtn.addEventListener('click', () => getWeather(cityInput.value));

Основные реализованные концепции:

  • Async/Await : для обработки асинхронных вызовов API.
  • Fetch API : для получения данных о погоде из внешнего сервиса.
  • Манипулирование DOM : для динамического обновления HTML-контента.
  • Шаблонные литералы : для легкой интерполяции строк и многострочных строк.
  • Обработка ошибок : использование try/catch для управления потенциальными ошибками во время операции выборки.

Изменение цвета фона

const colorBtn = document.getElementById('colorBtn');
const colorDisplay = document.getElementById('colorDisplay');

// Arrow function
const generateRandomColor = () => {
  // Math object usage
  const r = Math.floor(Math.random() * 256);
  const g = Math.floor(Math.random() * 256);
  const b = Math.floor(Math.random() * 256);
  // Template literal
  return `rgb(${r}, ${g}, ${b})`;
};

// Event listener with arrow function
colorBtn.addEventListener('click', () => {
  const newColor = generateRandomColor();
  // DOM manipulation
  document.body.style.backgroundColor = newColor;
  colorDisplay.textContent = newColor;
});

Основные реализованные концепции:

  • Стрелочные функции : для кратких выражений функций.
  • Математический объект : для генерации случайных значений RGB для цветов.
  • Шаблонные литералы : для построения строки RGB.
  • Прослушиватели событий : для обработки взаимодействий пользователя (нажатий кнопок).
  • Манипуляции с DOM : изменение цвета фона и отображение текущего цвета.

Приложение «Список дел»

const todoForm = document.getElementById('todoForm');
const todoInput = document.getElementById('todoInput');
const todoList = document.getElementById('todoList');

// Local storage usage
let todos = JSON.parse(localStorage.getItem('todos')) || [];

// Arrow function
const renderTodos = () => {
  // Array method (map)
  // Template literal
  todoList.innerHTML = todos.map((todo, index) => `
    <li>
      ${todo}
      <button onclick="removeTodo(${index})">Delete</button>
    </li>
  `).join('');
};

// Event handling function
function addTodo(e) {
  e.preventDefault();
  const newTodo = todoInput.value.trim();
  if (newTodo) {
    // Array method (push)
    todos.push(newTodo);
    // Local storage
    localStorage.setItem('todos', JSON.stringify(todos));
    todoInput.value = '';
    renderTodos();
  }
}

// Array manipulation
function removeTodo(index) {
  // Array method (splice)
  todos.splice(index, 1);
  // Local storage
  localStorage.setItem('todos', JSON.stringify(todos));
  renderTodos();
}

// Event listener
todoForm.addEventListener('submit', addTodo);
renderTodos();

Основные реализованные концепции:

  • Локальное хранилище : для сохранения задач между сеансами.
  • Методы массива : используются mapдля рендеринга и push/ spliceдля изменения списка дел.
  • Стрелочные функции : для краткого синтаксиса функций.
  • Обработка событий : для управления отправкой форм и нажатиями кнопок.
  • Шаблонные литералы : для динамической генерации HTML-разметки.

Эти мини-проекты иллюстрируют, как основные концепции JavaScript объединяются в практических приложениях. Они демонстрируют асинхронное программирование, манипуляцию DOM, обработку событий, методы массивов и многое другое, предоставляя ощутимый контекст для понимания вышеуказанных основных фундаментальных навыков JavaScript перед тем, как приступить к разработке на Vue3.js.

#JavaScript#Vue