Vue开发者必懂的11个JavaScript基础知识

随着人工智能和一些科技博主的兴起，在 JavaScript 领域似乎有很多人在使用框架之前忽略了基础知识。理解核心的 JavaScript 概念是至关重要的，就像学会走路才能跑一样。当我换工作需要熟练掌握 Vue 时，我花时间回顾了这些 JavaScript 知识，以便更有效地开发 Vue 3。我理解和使用 React，但这不是我的最爱框架，这又是另一个话题。以下是这些基础概念为何重要的几点：

• 为什么这很重要： Vue 3 的响应式系统很大程度上依赖于正确的变量声明。
• 要使用组合式 API，你需要理解 const 在 ref 和 reactive 对象中的应用。
• 类型感知有助于 Vue 3 的模板渲染和属性验证过程。

const count = ref(0) // 定义了一个名为count的变量，初始值为0
const user = reactive({ // 定义了一个名为user的响应式对象
  name: 'John', // 名字为John
  age: 30 // 年龄为30岁
})

全屏，退出全屏

• 为什么这很重要：这对于 Vue3 模板表达式和字符串插值来说至关重要。
• 它在计算的属性和方法中被广泛使用。
• 因此，模板字符串对于动态组件模板和属性值非常有用。

    const greeting = computed(() => `你好， ${user.name} !`)

进入全屏，退出全屏

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

    const 双倍计数 = computed(() => count.value * 2)
    watch(() => user.name, (newValue, oldValue) => {
      console.log(`控制台显示：名字从${oldValue}改成了${newValue}`)
    })

进入全屏模式 退出全屏模式

• 为什么这很重要：在处理 Vue 的响应式对象时非常重要。
• 在定义组件的 props 和 emits 时是必需的。
• 从 setup() 返回值中解构时也是必不可少的。

    export default {
      setup(props, { emit }) {
        // 定义了props中的title和description
        const { title, description } = props
        // 返回title和description
        return { title, description }
      }
    }

切换到全屏模式。退出全屏

• 为什么这很重要：对于用 v-for 渲染列表来说非常重要。
• 非常关键于进行响应式数据操作。
• 常用于计算属性中进行数据转换。

    <template>
      <ul>
        <li v-for="item in 过滤后的项目" :key="item.id">{{ item.name }}</li>
      </ul>
    </template>

    <script setup>
    // 定义一个包含项目的数据引用
    const 项目 = ref([/* ... */])
    // 计算过滤后的项目列表
    const 过滤后的项目 = computed(() => 
      项目.value.filter(item => item.isActive)
    )
    </script>

全屏/退出全屏

• 为什么这很重要：在 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(名称) {
    this.名称 = 名称
  }

  sayHello() {
    console.log(`来自 ${this.名称} 的问候`);
  }
  // 基础组件类，用于定义基础组件的名称和问候方法
}

class SpecialComponent extends BaseComponent {
  constructor(名称, 特殊属性) {
    super(名称)
    this.特殊属性 = 特殊属性
  }
  // 特殊组件类，继承自基础组件，增加了特殊属性
}

切换到全屏模式，退出全屏

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

    <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">点击我</button>
    </template>

    <script setup>
    import { defineEmits } from 'vue'
    const emit = defineEmits(['自定义事件名'])

    function handleClick() {
      emit('自定义事件名', { data: '某些数据' })
    }
    </script>

进入全屏 退出全屏

• 为什么这很重要：这很重要，因为它对于组件的错误边界很重要。
• 对于API调用和异步操作来说，这至关重要。
• 维护应用稳定性是必不可少的。

    import { onErrorCaptured } from 'vue' // 从vue导入错误捕获函数

    export default {
      setup() {
        onErrorCaptured((error, instance, info) => {
          console.error('捕获到错误:', error, instance, info)
          // 处理错误或向后端报告
          return false // 阻止错误进一步传播
        })

        async function fetchData() {
          try {
            const response = await api.getData() // 获取数据
            // 处理接收到的数据
          } catch (error) {
            console.error('获取数据失败:', error)
            // 处理错误（例如，向用户展示友好的提示）
          }
        }

        return { fetchData }
      }
    }

全屏查看，退出全屏

这些代码片段展示了每个概念在 Vue 3 开发中的实际应用场景，为开发人员提供了理解并应用这些基本 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 {
        // API调用的异步/等待
        const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`);
        // 解析JSON的异步/等待
        const data = await response.json();

        // 模板字符串
        // 更新DOM
        weatherInfo.innerHTML = `
          <h2>${data.name}</h2>
          <p>温度: ${data.main.temp}°C</p>
          <p>天气状况: ${data.weather[0].description}</p>
        `;
      } catch (error) {
        // 获取失败:
        console.error('获取失败:', error);
        weatherInfo.innerHTML = '<p>获取天气信息失败了，请稍后再试。</p>';
      }
    }

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

进入全屏，退出全屏

本文实现的核心概念包括：

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

……

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

    // 箭头函数（ES6新增）
    const generateRandomColor = () => {
      // 生成随机颜色
      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');

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

    // Arrow function
    const renderTodos = () => {
      // Array method (map)
      // 模板字面量
      todoList.innerHTML = todos.map((todo, index) => `
        <li>
          ${todo}
          <button onclick="removeTodo(${index})">删除事项</button>
        </li>
      `).join('');
    };

    // 事件处理函数
    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处理
    function removeTodo(index) {
      // Array方法（splice()）
      todos.splice(index, 1);
      // Local storage
      localStorage.setItem('todos', JSON.stringify(todos));
      renderTodos();
    }

    // 事件监听
    todoForm.addEventListener('submit', addTodo);
    // 渲染待办列表
    renderTodos();

点击这里进入全屏，点击这里退出全屏

以下是一些核心概念的实现：

• 本地存储：用于持久化待办事项，使其跨会话保留。
• 数组方法：使用 map 渲染待办事项列表，并使用 push/splice 来修改待办事项列表。
• 箭头函数：用于函数的简洁语法。
• 事件处理：处理表单提交和按钮点击事件。

• 模板字符串：用于动态生成 HTML 标签。

• • *

这些迷你项目展示了核心的JavaScript概念如何在实际应用中融为一体。它们包括异步编程、DOM操作、事件处理、数组方法等，提供了理解上述核心JavaScript技能的具体上下文，从而在进入Vue3.js开发之前更好地掌握这些技能。

全屏，退出全屏