从基础开始

随着人工智能和一些技术教育影响者的出现，许多人在使用 JavaScript 框架时似乎跳过了基础知识。理解核心的 JavaScript 概念至关重要，就像在跑步之前要先学会走路一样。当我得到这份新工作并需要熟练掌握 Vue 时，我花时间回顾了这些 JavaScript 知识，以便更有效地进行 Vue 3 开发。我理解并可以使用 React，但它并不是我最喜欢的框架，这是另一个话题。以下是这些基础知识的重要性：

变量与数据类型

• 为什么重要：Vue 3 的响应式系统严重依赖于正确的变量声明。
• 组合式 API 要求理解 const 用于 ref 和 reactive 对象。
• 类型意识有助于 Vue 3 的模板渲染和 prop 验证。

const count = ref(0)
const user = reactive({
  name: 'John',
  age: 30
})

模板字符串

• 为什么重要：这对于 Vue 3 的模板表达式和字符串插值至关重要。
• 它广泛用于计算属性和方法中。
• 模板字符串对于动态组件模板和 prop 值非常有用。

const greeting = computed(() => `Hello, ${user.name}!`)

箭头函数

• 为什么重要：对于 Vue 3 的组合式 API 至关重要。
• 用于 setup() 函数、计算属性和监听器。
• 对于在方法中保持正确的 this 绑定至关重要。

const doubleCount = computed(() => count.value * 2)
watch(() => user.name, (newValue, oldValue) => {
  console.log(`Name changed from ${oldValue} to ${newValue}`)
})

对象与对象解构

• 为什么重要：处理 Vue 的响应式对象的基础。
• 用于组件 props 和 emits 声明。
• 对于从 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>

Promise 与 Async/Await

• 为什么重要：在 setup() 中获取数据的关键。
• 用于异步组件操作。
• 对于生命周期钩子和监听器至关重要。

import { onMounted } from'vue'
exportdefault {
asyncsetup() {
    const data = ref(null)

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

模块与导出

• 为什么重要：组件组织的基础。
• 用于组合式函数和插件。
• 对于保持干净的架构至关重要。

// useCounter.js
import { ref } from'vue'

exportfunctionuseCounter() {
const count = ref(0)
constincrement = () => count.value++
return { count, increment }
}

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

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

类与面向对象概念

• 为什么重要：有助于理解组件继承。
• 用于自定义指令的实现。
• 对于复杂的状态管理非常有价值。

class BaseComponent {
constructor(name) {
    this.name = name
  }

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

classSpecialComponentextendsBaseComponent {
constructor(name, special) {
    super(name)
    this.special = special
  }
}

可选链

• 为什么重要：在模板中安全访问属性的关键。
• 在计算属性中非常有用。
• 有助于处理异步数据状态。

<template>
  <div>{{ user?.profile?.name }}</div>
</template>

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

事件处理

• 为什么重要：组件通信的关键。
• 用于 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>

错误处理

• 为什么重要：组件错误边界的关键。
• 对于 API 调用和异步操作至关重要。
• 对于保持应用程序的稳定性至关重要。

import { onErrorCaptured } from'vue'

exportdefault {
setup() {
    onErrorCaptured((error, instance, info) => {
      console.error('Captured error:', error, instance, info)
      // 处理或报告错误
      returnfalse// 防止错误进一步传播
    })

    asyncfunctionfetchData() {
      try {
        const response = await api.getData()
        // 处理数据
      } catch (error) {
        console.error('Error fetching data:', error)
        // 处理错误（例如，显示用户友好的消息）
      }
    }

    return { fetchData }
  }
}

这些代码片段展示了每个概念在 Vue 3 开发中的实际应用，为开发者提供了理解和应用这些基础 JavaScript 技能的具体示例。

核心 JavaScript 概念的实际应用

为了说明这些基础 JavaScript 概念在初学者场景中的应用，我们来看三个小项目：天气应用、背景颜色切换器和待办事项应用。这些示例将展示我们所讨论概念的实际应用。

天气应用

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

// 异步函数声明
asyncfunctiongetWeather(city) {
try {
    // 使用 async/await 进行 API 调用
    const response = awaitfetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`);
    // 使用 async/await 解析 JSON
    const data = await response.json();

    // 模板字符串用于字符串插值
    // DOM 操作
    weatherInfo.innerHTML = `
      <h2>${data.name}</h2>
      <p>Temperature: ${data.main.temp}°C</p>
      <p>Description: ${data.weather.description}</p>
    `;
  } catch (error) {
    // 错误处理
    console.error('Error fetching weather data:', error);
    weatherInfo.innerHTML = '<p>Failed to fetch weather data. Please try again.</p>';
  }
}

// 事件监听器
getWeatherBtn.addEventListener('click', () =>getWeather(cityInput.value));

核心概念实现：

• Async/Await：用于处理异步 API 调用。
• Fetch API：从外部服务获取天气数据。
• DOM 操作：动态更新 HTML 内容。
• 模板字符串：用于字符串插值和多行字符串。
• 错误处理：使用 try/catch 处理 fetch 操作中的潜在错误。

背景颜色切换器

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

// 箭头函数
constgenerateRandomColor = () => {
// 使用 Math 对象
const r = Math.floor(Math.random() * 256);
const g = Math.floor(Math.random() * 256);
const b = Math.floor(Math.random() * 256);
// 模板字符串
return`rgb(${r}, ${g}, ${b})`;
};

// 事件监听器与箭头函数
colorBtn.addEventListener('click', () => {
const newColor = generateRandomColor();
// DOM 操作
document.body.style.backgroundColor = newColor;
  colorDisplay.textContent = newColor;
});

核心概念实现：

• 箭头函数：用于简洁的函数表达式。
• Math 对象：生成随机的 RGB 颜色值。
• 模板字符串：用于构建 RGB 字符串。
• 事件监听器：处理用户交互（按钮点击）。
• DOM 操作：更改背景颜色并显示当前颜色。

待办事项应用

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

// 使用本地存储
let todos = JSON.parse(localStorage.getItem('todos')) || [];

// 箭头函数
constrenderTodos = () => {
// 数组方法 (map)
// 模板字符串
  todoList.innerHTML = todos.map((todo, index) =>`
    <li>
      ${todo}
      <button onclick="removeTodo(${index})">Delete</button>
    </li>
  `).join('');
};

// 事件处理函数
functionaddTodo(e) {
  e.preventDefault();
const newTodo = todoInput.value.trim();
if (newTodo) {
    // 数组方法 (push)
    todos.push(newTodo);
    // 本地存储
    localStorage.setItem('todos', JSON.stringify(todos));
    todoInput.value = '';
    renderTodos();
  }
}

// 数组操作
functionremoveTodo(index) {
// 数组方法 (splice)
  todos.splice(index, 1);
// 本地存储
localStorage.setItem('todos', JSON.stringify(todos));
renderTodos();
}

// 事件监听器
todoForm.addEventListener('submit', addTodo);
renderTodos();

核心概念实现：

• 本地存储：用于在会话之间持久化待办事项。
• 数组方法：使用 map 进行渲染，使用 push/splice 修改待办事项列表。
• 箭头函数：用于简洁的函数语法。
• 事件处理：管理表单提交和按钮点击。
• 模板字符串：用于动态生成 HTML 标记。

这些小型项目展示了核心 JavaScript 概念在实际应用中的结合。它们展示了异步编程、DOM 操作、事件处理、数组方法等，为理解上述基础 JavaScript 技能提供了具体的上下文，然后再进入 Vue 3 开发。

原文地址：https://dev.to/nerajno/11-javascript-fundamentals-for-vue-developers-42a1