Vue踩坑记录：从初学者到进阶开发者

2024-01-01 18:36:43

Vue 开发中的宝贵经验：避开常见陷阱，迈向高效开发

踏入 Vue.js 开发之旅，我遇到过不少坑，也从中汲取了不少经验。如今，我将分享这些经历，帮助其他 Vue 开发者少走弯路，打造更卓越的应用程序。

1. 表单处理：制服回车陷阱，防止页面刷新

当使用 Vue 开发表单时，我曾遇到一个棘手的问题：在表单仅包含一个输入框时，按下回车键会导致页面刷新。这让我百思不得其解，因为我的代码中并没有刷新页面的操作。

经过一番探索，我发现问题根源在于 <form> 标签。默认情况下，<form> 标签会在用户按下回车键时提交表单，从而引发页面刷新。解决之道，需在 <form> 标签中添加 @submit.prevent 事件监听器，以阻止表单的默认提交行为。

<form @submit.prevent>
  <input type="text" name="name">
  <input type="submit" value="提交">
</form>

添加 @submit.prevent 事件监听器后，按下回车键不再提交表单，页面也得以安然无恙。

2. 路由管理：避免未知组件，404 妥善处理

在使用 Vue 开发单页面应用程序时，路由管理至关重要。然而，我曾遇到一个问题：访问不存在的路由时，页面会弹出一个错误信息，提示组件未定义。

经过排查，我发现问题出在路由配置中。我忽略了在路由配置中定义不存在路由时要渲染的组件。为了解决此问题，我需在路由配置中添加一个默认路由，指向 404 组件。

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '*', component: NotFound } // 默认路由，指向404组件
  ]
});

添加默认路由后，访问不存在的路由时，页面不再报错，而是会渲染 404 组件。

3. 组件开发：父子通信进阶，props 和 slots 的妙用

在 Vue 组件开发中，父子组件通信是必备技能。起初，我使用 $emit 和 $on 事件来实现通信，但这种方式会造成组件之间的显式依赖。后来，我了解到 Vue 提供了更出色的父子通信方式：props 和 slots。

props 是父组件向子组件传递数据的单向绑定方式，而 slots 是子组件在父组件中定义的占位符，允许子组件在父组件中嵌入内容。使用 props 和 slots，可以实现父子组件之间的松散耦合，提升组件的可重用性。

// 父组件
<template>
  <child-component :message="message"></child-component>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from parent component'
    }
  }
}
</script>

// 子组件
<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  props: ['message']
}
</script>

4. 生命周期：掌握生命周期钩子，掌控组件生命

Vue 组件的生命周期钩子是组件在创建、挂载、更新和销毁过程中的重要函数。这些钩子可以用来执行多种操作，如：

组件创建时初始化数据
组件挂载时操作 DOM
组件更新时响应数据变化
组件销毁时清理资源

熟练掌握组件生命周期钩子的作用和用法至关重要，它能帮助我们深入理解 Vue 组件的工作原理，写出更健壮、更易维护的代码。

export default {
  data() {
    return {
      count: 0
    }
  },
  created() {
    console.log('组件已创建');
  },
  mounted() {
    console.log('组件已挂载');
  },
  updated() {
    console.log('组件已更新');
  },
  beforeDestroy() {
    console.log('组件即将销毁');
  }
}

5. 性能优化：拒绝无效渲染，提高应用程序流畅度

在 Vue 应用程序开发中，性能优化尤为重要。为了提高应用程序性能，我们可以采取措施避免不必要的渲染，从而减少开销。

避免无效渲染的一种方法是使用缓存。我们可以将需要多次渲染的数据缓存起来，并在需要时直接从缓存中读取，无需重新计算。

另一种避免无效渲染的方法是使用条件渲染。我们可以利用 v-if 和 v-for 指令来控制组件的渲染，仅在满足特定条件时才渲染组件。

<template>
  <div v-if="showComponent">
    <child-component></child-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showComponent: false
    }
  }
}
</script>