从基础开始
随着人工智能和一些技术教育影响者的出现，许多人在使用 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'
export default {
async setup() {
const data = ref(null)
onMounted(async () => {
data.value = awaitfetchData()
})
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 {
const ructor(name) {
this.name = name
}
sayHello() {
console.log(`Hello from ${this.name}`)
}
}
class SpecialComponentextendsBaseComponent {
const ructor(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'
export default {
setup() {
onErrorCaptured((error, instance, info) => {
console.error('Captured error:', error, instance, info)
// 处理或报告错误
returnfalse// 防止错误进一步传播
})
async function fetchData() {
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');
// 异步函数声明
async function getWeather(city) {
try {
// 使用 async/await 进行 API 调用
const response = await fetch(`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');
// 箭头函数
const generateRandomColor = () => {
// 使用 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')) || [];
// 箭头函数
const renderTodos = () => {
// 数组方法 (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 开发。
