Vue3 环境搭建与生命周期详解：从 Vite 创建项目到精通生命周期⏳

answerball
788 阅读6分钟

引言

在前端开发的道路上，Vue3 作为一个现代化的前端框架，凭借其简洁的语法和灵活的功能，赢得了广大开发者的喜爱。而对于新手来说，最开始的环境搭建可能让人有点迷茫：如何快速搭建一个 Vue3 项目？如何了解组件生命周期以及常见的条件渲染？别担心，今天我就带你一起，从零开始，通过 Vite 创建一个 Vue3 项目，然后深入浅出地解析 Vue3 的生命周期和条件渲染。让我们一起愉快地编程吧！🎉

700.gif

在介绍知识点前先看看成果图，以便大家知道每串代码实现的效果：

image.png

一、如何搭建 Vue3 开发环境？🎯

想要开始学习 Vue3，首先我们需要一个开发环境。这里，我们将使用 Vite，这是一个现代化的前端构建工具，支持快速的热重载和极高的构建性能，非常适合 Vue3 项目。

1. 安装 Node.js

在你开始之前，需要确保你已经安装了 Node.js。你可以去 Node.js 官网 下载并安装最新的 LTS 版本。安装好 Node 后，你可以在命令行输入以下命令来检查是否安装成功：

node -v
npm -v

如果这两个命令能够正确返回版本号，说明 Node.js 和 npm 已经安装成功！🚀

2. 使用 Vite 创建 Vue3 项目

接下来，我们就可以使用 Vite 来创建一个 Vue3 项目啦。通过 Vite 脚手架生成项目是最简单也是最快的方法。打开终端（命令行），输入以下命令：

npm create vite@latest my-vue3-project --template vue

这里的 my-vue3-project 是你项目的名字，当然，你可以自定义它。命令会自动生成一个包含 Vue3 配置的基础模板。

3. 安装依赖

进入刚刚创建的项目目录：

cd my-vue3-project

然后，运行以下命令来安装项目依赖：

npm install

安装完成后，你就可以启动项目了：

npm run dev

如果一切顺利，你会看到命令行中显示了类似以下的内容：

 VITE v6.0.6  ready in 1113 ms

  > Local:    http://localhost:3000/
  > Network:  http://192.168.x.x:3000/

此时，你可以在浏览器中访问 http://localhost:3000，你就可以看到一个空白的 Vue3 项目页面啦！👏 (注意也可能不是哦。)

比如我这里就是

image.png

一切根据实际出发。

二、Vue3 组件生命周期详解 ⏳

好了，环境搭建完毕，现在我们开始进入 Vue3 的核心部分——组件生命周期。Vue3 的组件生命周期就像人的一生，经历了“诞生”、“成长”和“衰老”三个阶段。每个阶段都有不同的钩子函数，供我们在不同时间点做事情。

1. 组件的诞生：onBeforeMount 和 onMounted

组件的诞生阶段就是我们常说的“挂载”过程。Vue 会在创建组件的时候，先把它的模板、样式、逻辑一起合并，然后挂载到父组件中，最终显示在页面上。

  • onBeforeMount：在组件挂载到 DOM 之前调用。此时模板已经编译完毕，组件实例也已经创建，但 DOM 还未完成渲染。
  • onMounted：组件挂载完毕后调用，页面已经渲染完毕。

代码示例：

onBeforeMount(() => {
  console.log('组件即将挂载到页面！');
});

onMounted(() => {
  console.log('组件已经挂载到页面！');
});

2. 组件的成长：onBeforeUpdate 和 onUpdated

组件在生命周期中的成长阶段，通常伴随着数据的变化。例如，用户输入表单数据，或者你更新了某个组件的状态，这些都会触发组件的更新。

  • onBeforeUpdate：在组件数据更新之前调用，可以在这里做一些准备工作。
  • onUpdated：在组件数据更新后调用，更新后的 DOM 会同步显示最新的状态。

代码示例：

onBeforeUpdate(() => {
  console.log('数据即将更新！');
});

onUpdated(() => {
  console.log('数据已经更新，DOM 也同步了！');
});

3. 组件的衰老：onBeforeUnmount 和 onUnmounted

当我们不再需要某个组件时，它就进入了生命周期的“衰老”阶段。在这个阶段，组件会被销毁并从 DOM 中移除。

  • onBeforeUnmount：在组件销毁之前调用，可以在这里进行资源清理工作，例如销毁定时器、清除事件监听等。
  • onUnmounted：组件销毁后调用，此时组件的 DOM 已经被从页面中移除。

代码示例：

onBeforeUnmount(() => {
  console.log('组件即将被销毁，清理工作开始！');
});

onUnmounted(() => {
  console.log('组件已经销毁，彻底告别！');
});

三、v-if 与 v-show：条件渲染的奥秘 🕵️‍♂️

当我们需要根据某个条件来显示或隐藏组件时，Vue 提供了两个非常好用的指令：v-if 和 v-show。虽然它们看起来功能相似，但其实它们有本质的区别。

1. v-if：动态挂载与卸载

v-if 是根据条件来动态挂载和卸载 DOM 元素。也就是说，当条件为 false 时，Vue 会完全移除组件的 DOM，根本不会渲染出来。

  • 优点：当组件不需要渲染时，它完全不会出现在 DOM 中，节省性能。
  • 缺点：条件变化时，会重新挂载和卸载组件，可能会带来一定的性能损耗。

代码示例：

<transition name="fade">
  <MyComponent v-if="isComponentVisible" />
</transition>

可以看看区别：

当显示条件为true:

image.png

当显示条件为false时:

image.png 我们发现在DOM树上这个组件也消失了。

2. v-show：隐藏与显示

v-show 则不同，它仅仅是通过设置 display: none 来隐藏组件，而不是卸载和挂载组件。所以，v-show 会始终存在于 DOM 中，但通过修改 display 来决定是否显示。

  • 优点：切换条件时，性能更好，不会频繁地销毁和重建组件。
  • 缺点：组件始终存在于 DOM 中，占用内存。

代码示例：

<transition name="fade">
  <MyComponent v-show="isComponentVisible" />
</transition>

我们可以发现这里只是通过简单的css样式修改了组件是否显示：

屏幕截图 2025-01-03 010527.png

四、过渡效果：让组件更酷炫 (这里的内容可以选择性观看)😎

当我们使用 v-if 或 v-show 控制组件的显示与隐藏时，常常希望能加上流畅的过渡效果。这时，我们可以使用 Vue 提供的 <transition> 标签来实现。

如何使用 <transition>

通过 name 属性，我们可以给过渡效果命名，然后在 CSS 中定义具体的动画效果。

<transition name="fade">
  <MyComponent v-if="isComponentVisible" />
</transition>

.fade-enter-active, .fade-leave-active {
  transition: opacity 1s ease-in-out;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

这段代码实现了组件在显示时的淡入效果和在隐藏时的淡出效果，极大地提升了用户体验。

五、总结：Vue3 让开发更愉快 🎉

通过今天的学习，我们从 Vite 环境搭建 到 Vue3 组件生命周期的深入理解，再到 条件渲染和过渡效果，已经掌握了 Vue3 的一些核心知识。这些知识不仅能帮助你更好地理解 Vue3 的内部机制，还能让你在实际开发中得心应手。

记住，Vue3 的生命周期就像人类的一生，而 v-if 和 v-show 就是你控制组件显示与隐藏的神奇武器。通过合理的过渡效果，你可以让组件的登场和消失都变得既帅气又流畅！

那么，赶紧动手开始你的 Vue3 项目吧！下次我会带你深入挖掘更多 Vue3 的强大功能，敬请期待！🚀

20200229174423_bzukt.jpg

avatar
文章
阅读
粉丝