Vue3快速入门——生命周期详解及代码案例
原创
前言
在 Vue 3 中，组件的生命周期是一个重要的概念，它描述了一个 Vue 组件从创建到销毁的过程中所经历的各个阶段。这些阶段包括组件的创建、挂载、更新和销毁等，Vue 3 提供了相应的钩子函数，允许我们在这些关键时刻执行自定义的逻辑。
下面我们将详细介绍 Vue 3 的生命周期钩子，并通过代码案例来说明它们的用法。
生命周期
Vue 3 的生命周期钩子主要包括以下几个：
setup()：组件的初始化阶段，用于设置响应式状态和执行其他初始化操作。onMounted()：组件已经挂载到 DOM 上后调用。onUpdated()：组件的 props 或 slots 更新后调用。onUnmounted()：组件实例被卸载和销毁前调用。
此外，Vue 3 还提供了 onBeforeMount()、onBeforeUpdate() 等钩子，用于在挂载和更新之前执行一些操作。
简单介绍了vue3生命周期，接下来我们用代码案例进行演示，
<!-- 步骤1 定义vue关联模块-->
<div id="app">
<!-- 搜索框-->
<input type="text" v-model="searchText">
<button v-on:click="search">搜索</button>
<span>{{searchText}}</span>
<table border="1 solid" colspa="0" cellspacing="0">
<tr>
<th>分类</th>
<th>时间</th>
<th>状态</th>
<th>标题</th>
</tr>
<tr v-for="(item, index) in articleList" :key="index">
<td>{{ item.category }}</td>
<td>{{ item.time }}</td>
<td>{{ item.state }}</td>
<td>{{ item.title }}</td>
</tr>
</table>
</div>
<script type="module">
// 步骤2 引入vue模块 在线CDN的引入方式，从vue.esm-browser.js获取到createApp
import { createApp, ref, onMounted, onUpdated, onUnmounted } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
const app = createApp({
setup() {
// 使用 ref 创建响应式数据
const articleList = ref([
{
category: "时事",
time: "2023-09-5",
state: "已发布",
title: "中国男篮缘何一败涂地?",
},
]);
const searchText = ref('');
// 生命周期钩子
onMounted(() => {
console.log('组件已挂载,开启定时器');
// 在这里执行挂载后的操作
});
onUpdated(() => {
console.log('组件已更新');
// 在这里执行更新后的操作
});
onUnmounted(() => {
console.log('组件已卸载');
// 在这里执行卸载前的清理操作
});
// 方法定义
function search() {
searchText.value = '你要搜索的文本'; // 使用 .value 来获取或设置 ref 的值
}
// 返回响应式数据和方法，以便在模板中使用
return {
articleList,
searchText,
search,
};
},
}).mount('#app');
</script>在上面的代码中，我们定义了一个简单的计数器组件。在setup()函数中，我们初始化了一个表格参数，并且定义了一个搜索按钮，然后，我们使用onMounted()、onUpdated()和onUnmounted()钩子来分别在组件挂载、更新和卸载时执行一些操作。
打开页面控制台，可以看到，组件已加载，说明启动就加载了onMounted()函数，如果点击搜索按钮，页面会显示文字，并且在控制台也可以看到组件已更新，说明触发了onUpdated()函数，结果如图所示。
总结
理解Vue的生命周期对于编写高效、可维护的前端代码至关重要，Vue3通过引入新的API和优化现有功能，使得开发者能够更加灵活地控制组件的生命周期，希望本文的讲解和代码案例能够帮助读者更好地掌握Vue3的生命周期钩子，从而提升开发水平。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。