Vue.js 中的常见错误

Vue.js，这个JavaScript框架在开发者圈子里可谓是大名鼎鼎，以其简洁和灵活著称，让开发者们能够高效地构建出既有趣又动态的网页应用。不过，就像任何技术一样，它也有自己的学习曲线和可能的陷阱。

在这篇博客文章中，我们会聊聊开发者在使用Vue.js时常见的几个错误，并给出一些实用的建议来避免它们。

错误1：忽视Vue的响应式系统

问题：Vue.js的核心特性之一就是它的响应式系统，能在状态变化时自动更新视图。我经常看到一些初级开发者犯的一个错误是，依赖非响应式数据，并期望这些数据的变化能触发更新。比如，下面这段代码是我在实际项目中见过的：

const cookiesAccepted = computed(() => {
  return localStorage.getItem("cookieConsent")
})

问题在于，我们依赖了一个非响应式的数据源来提供计算属性的值。

解决方案：确保你总是依赖于用reactive或ref定义的响应式数据，当你期望变化触发组件更新时。如果在使用像localStorage这样的原生浏览器API，可以使用一个可复用的包装器，比如VueUse里的useLocalStorage，它在API外面加上了一层响应式。

错误2：不正确使用计算属性

问题：计算属性是Vue.js中一个非常强大的特性，可以创建基于其他数据属性变化的动态值。一个常见的错误是，开发者在依赖其他响应式数据的值时，使用方法而不是计算属性，这可能会导致不必要的计算和性能问题。

解决方案：如果一个值需要根据响应式数据的变化重新计算，就用计算属性。这样可以确保计算是缓存的，并且只在依赖项变化时重新评估，从而提高应用性能。

错误3：在同一元素上同时使用v-if和v-for

问题：当v-if和v-for存在于同一个节点上时，v-if的优先级更高。这意味着v-if条件将无法访问v-for作用域内的变量。例如：

<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo.name }}
</li>

这里会报错，因为“todo”这个属性在v-for的作用域内没有定义。

解决方案：尽可能在嵌套元素上使用v-if，或者在使用v-for循环之前，通过计算属性来过滤数据。这样做不仅提高了代码的可读性，还能确保v-if能够访问到每个单独的项。

<template v-for="todo in todos">
  <li v-if="!todo.isComplete">
    {{ todo.name }}
  </li>
</template>

或者：

<template v-for="todo in completedTodosComputedProp">
  <li>{{ todo.name }}</li>
</template>

错误4：未充分利用Vue的组件系统

问题：Vue的组件系统旨在帮助开发者组织和重用代码。一个常见的错误是没有将应用程序分解成更小、可重用的组件，导致代码重复和难以维护的代码库。

解决方案：识别出可以独立或重用的应用部分，并将它们转换成组件。这样做不仅使你的代码库更易于管理和维护，而且还能更有效地利用Vue的响应式和生命周期钩子。你也可以将不会渲染任何内容的有状态功能分解成可复用的composables。

错误5：忘记清理组件的副作用

问题：在使用自定义事件、定时器、服务器事件监听器或第三方库时，开发者有时会忘记清理这些持续的副作用，导致内存泄漏和性能问题，特别是在单页应用程序(SPAs)中。比如下面这个负责显示当前时间的组件：

<!-- Now.vue -->
<script setup>
import { ref } from 'vue';
const now = ref(new Date().toLocaleString());
setInterval(() => {
  now.value = new Date().toLocaleString();
}, 1000);
</script>
<template>
  {{ now }}
</template>

如果这个组件从页面上移除，定时器仍然会持续运行，尽管它已经不再被使用。

解决方案：总是在unmounted生命周期钩子中移除事件监听器和停止定时器或超时。这样可以确保组件自己清理干净，不会留下不必要的操作在后台运行。

onUnmounted(() => clearInterval(interval));

另外，你可以使用像VueUse这样的有用库，它可以根据常见需求自动清理这些副作用。

总结

Vue.js为构建Web应用程序提供了一个强大的平台，但避免常见的陷阱是发挥其全部潜力的关键。通过理解和解决这些常见错误，开发者可以编写更高效、更易于维护和性能更优的Vue应用程序。记住，从错误中学习是软件开发旅程的一部分。

本文译自：https://vueschool.io/articles/vuejs-tutorials/common-mistakes-in-vue-js/