vue3中生命周期函数

CSDN文章质量分数查询:https://www.csdn.net/qc

前言:

Vue.js由于其丰富的API和灵活易用等特性,能够帮助我们快速构建单页应用程序,,是目前最受欢迎的javascript框架之一。 再过去几年里,我们一直停留在Vue 2.x的学习和实践,而当下Vue 3.0是Vue.js的最新版本,很多大厂已经开始转型Vue 3.0。所以,我们必须紧跟时代步伐,熟练掌握并深刻理解Vue 3.0。

什么是Vue生命周期呢?

Vue实例从创建到销毁的过程,就是生命周期。就是vue实例从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,在vue生命周期中提供了一系列的生命周期函数。生命周期钩子在开发过程中非常有用,可以用来管理资源、执行清理操作、订阅事件或执行一些特定阶段需要完成的操作。然而,在 Vue 3.0 中,Composition API 的引入和对生命周期钩子的修改,使得代码组织更加模块化,提高了代码的可读性和可维护性。

正文:

生命周期钩子是函数,是vue允许你在生命周期中的各个阶段进行调用的函数,以方便你在每个阶段执行自定义的操作!

一、

1、

2、

3、

二、vue3中生命周期钩子函数的用法

javascript 复制代码
<template>
  <div>{{ message }}</div>
</template>

<script>
import { ref, onBeforeMount, onMounted, onBeforeUnmount, onUnmounted } from 'vue';

export default {
  setup() {
    const message = ref('Hello, Vue 3 with Composition API!');

    onBeforeMount(() => {
      console.log('beforeMount');
    });

    onMounted(() => {
      console.log('mounted');
    });

    onBeforeUnmount(() => {
      console.log('beforeUnmount');
    });

    onUnmounted(() => {
      console.log('unmounted');
    });

    return {
      message
    };
  }
}
</script>

总结

Vue 3.0 的 Composition API 允许您在 setup 中定义响应式数据、计算属性、方法等,这使得组件的生命周期更加灵活,因为可以将相关的代码按照逻辑分组,而不是按照生命周期钩子。此外,Vue 3.0 还引入了 onXXX 这样的生命周期事件监听器,用于替代 $on$off,以便更好地管理事件。

总的来说,Vue 3.0 的生命周期更加精细化,允许您更好地组织和管理组件的逻辑。不同于 Vue 2.x,Vue 3.0 的生命周期不再强调"钩子"的概念,而更加关注组合(Composition)的方式来组织代码。这使得代码更加模块化和可维护。

相关推荐
rising start17 分钟前
前端基础一、HTML5
前端·html·html5
Never_Satisfied25 分钟前
在JavaScript / HTML中,div容器在内容过多时不显示超出的部分
开发语言·javascript·html
鬼谷中妖26 分钟前
JavaScript 循环与对象:深入理解 for、for...in、for...of、不可枚举属性与可迭代对象
前端
大厂码农老A31 分钟前
你打的日志,正在拖垮你的系统:从P4小白到P7专家都是怎么打日志的?
java·前端·后端
im_AMBER32 分钟前
CSS 01【基础语法学习】
前端·css·笔记·学习
DokiDoki之父36 分钟前
前端速通—CSS篇
前端·css
pixle039 分钟前
Web大屏适配终极方案:vw/vh + flex + clamp() 完美组合
前端·大屏适配·vw/vh·clamp·终极方案·web大屏
ssf19871 小时前
前后端分离项目前端页面开发远程调试代理解决跨域问题方法
前端
@PHARAOH1 小时前
WHAT - 前端性能指标(加载性能指标)
前端
尘世中一位迷途小书童1 小时前
🎨 SCSS 高级用法完全指南:从入门到精通
前端·css·开源