首页 > 其他分享 >探索Vue生命周期钩子函数:从创生到销毁

探索Vue生命周期钩子函数:从创生到销毁

时间:2023-10-16 15:32:57浏览次数:44  
标签:生命周期 DOM 钩子 创生 Vue export 组件


Vue这个引领前端开发潮流的框架,其优雅的响应式数据绑定和组件式开发方式,使得它备受瞩目。然而,Vue的魅力绝不仅限于此,它还赋予开发者一组神奇的生命周期钩子函数,能够在组件的各个成长阶段插入自定义代码。本文将带你进入Vue生命周期钩子函数的奇妙世界,一探它们的妙用、内部机制,同时提供详细的代码示例,助您全方位领略这一重要概念。

生命周期这个名词在很多地方都有提到过,每个人、每个事物都有自己的生命周期,人从出生到成长到死亡,手机从生产到使用到报废。生命周期就是体现了一个客观事物从产生到灭亡的经历的整个过程。

今天我们学习一下前端框架中非常流行的Vue.js的生命周期。

公众号:Code程序人生,个人网站:https://creatorblog.cn

Vue生命周期钩子函数是何物?

Vue生命周期钩子函数,是一系列在组件生命周期不同阶段自动调用的函数。它们赋予您机会,可以在组件的创生、更新、销毁等关键时刻,植入您所需的自定义逻辑,实现更精准的控制和交互。Vue的组件生命周期被细分为不同的阶段,每个阶段均对应着相应的钩子函数。

Vue生命周期图景

为了更直观地理解Vue生命周期,我们先看看Vue组件的生命周期图:

探索Vue生命周期钩子函数:从创生到销毁_javascript

以上图清晰展现了Vue组件从创生到销毁的完整过程。接下来,我们将逐个阶段为您揭示其中的奥妙,并举例说明每个阶段钩子函数的用途。

创生阶段

  • beforeCreate: 此阶段组件刚刚被创建,数据观测和事件初始化尚未进行。您可在此进行初始化设置,如获取初始数据。
<script>
export default {
  beforeCreate() {
    // 在这里执行一些初始化逻辑
  },
};
</script>
  • created: 组件数据观测已完成,属性和方法已设置,但尚未挂载到DOM上。适用于异步操作,如获取数据。
<script>
export default {
  created() {
    // 在这里执行异步操作,如获取数据
  },
};
</script>

挂载阶段

  • beforeMount: 在DOM挂载之前调用。可用于进行DOM操作前的准备工作。
<script>
export default {
  beforeMount() {
    // 在这里进行DOM操作前的准备工作
  },
};
</script>
  • mounted: 组件已挂载到DOM上。适用于进行DOM操作,例如初始化第三方库或添加事件监听。
<script>
export default {
  mounted() {
    // 在这里进行DOM操作,如初始化第三方库
  },
};
</script>

更新阶段

  • beforeUpdate: 数据更新前,在重新渲染之前调用。用于准备工作,以便更新。
<script>
export default {
  beforeUpdate() {
    // 在这里进行数据更新前的准备工作
  },
};
</script>
  • updated: 数据更新且重新渲染完成后调用。适用于DOM操作,但需注意避免无限循环更新。
<script>
export default {
  updated() {
    // 在这里进行DOM操作,但避免无限循环更新
  },
};
</script>

销毁阶段

  • beforeDestroy: 组件销毁前调用。适用于清理工作,如取消事件监听、清除定时器等。
<script>
export default {
  beforeDestroy() {
    // 在这里进行清理工作,如取消事件监听
  },
};
</script>
  • destroyed: 组件已销毁,清理工作已完成。适用于进行最终的资源释放。
<script>
export default {
  destroyed() {
    // 在这里进行最终的资源释放
  },
};
</script>

总结

Vue生命周期钩子函数为开发者提供了在组件各个生命周期阶段插入自定义代码的能力,实现更精准的控制和交互。本文深入介绍了每个生命周期阶段,创生、挂载、更新、销毁的钩子函数及其用途,并提供了代码示例,助你全方位掌握Vue的生命周期机制。合理利用这些钩子函数,能让你以更高效、灵活和富有创造力的方式开发Vue应用。


标签:生命周期,DOM,钩子,创生,Vue,export,组件
From: https://blog.51cto.com/u_15295488/7884453

相关文章

  • vue - 父子通信
    .sync修饰符:弹框显示隐藏功能:  a.需要定义ref、prop、自定义方法.(1).使用sync://父组件<Toggle:show.sync='show'/>//Toggle组件<divv-if="show">展示和隐藏组件</div><button@click="test">隐藏组件</button>exportdefault{......
  • vue锚点跳转
    直接上答案//获取dom元素constele=this.$refs['refName'];//获取元素距视窗的高度consttop1=ele?ele.getBoundingClientRect().top:0;//如果ref是在v-for中定义的,需如下获取consttop1=ele?ele[0].getBoundingClientRect().top:0;//获取滚动条的位置c......
  • vue自定义样式
    在项目中常常遇到一些页面由后台定制样式呈现,这就需要在页面中动态绑定style,如若定制样式里包含了伪类、媒体查询、hover效果能样式,寻常的v-bind:style内联样式可能就无法满足需求,这里就记录了一个解决办法。那么该如何操作呢,简单举个栗子:首先,我们在需要定制的样式元素上定义一......
  • vue移动鼠标画矩形(抄别人的,下附原文地址)
    1、draw.js/***画布中绘制矩形*参数:cav-画布对象list-矩形数组i-选中矩形下标**//*操作执行方法分发*/exportfunctiondraw(cav,list,i){//画布初始化letctx=cav.getContext('2d');ctx.strokeStyle='blue';ctx.lineWidth=2;......
  • Vue学习笔记(十一):路由管理
      1Vue路由基本使用¶1.1安装¶Vue中默认并不提供路由功能,需要安装其插件Vue-router,如下所示,其中“@3”表示安装版本[email protected]创建路由¶在src目录下创建路由文件目录,目录名为“router”,并在该目录下创建“index.js”文件,文件内容如下所示,代码......
  • [Vue]模板语法和MVVM
    模板语法分为:①插值语法、②指令语法插值语法{{xxx}}指令语法v-bind:attr='xxx' 注意v-bind:只是一种指令,指令可以有很多种。v-bind:可以简写为:<body><divid="root"><h1>插值语法</h1><h3>{{name}}</h3><hr/&g......
  • 天地图 vue引入
    官网使用引入基础引入创建......
  • vue @click.native/stop/prevent
    [email protected]父组件要引用子组件中的点击事件,可以通过@click.native来直接访问子组件中的方法,如果不使用@click.native可在子组件中使用this.$emit('click')来传递事件//父组件<template><div><span>父组件页面</span><search@click="onSubmit"></search&g......
  • 手撕Vue-数据驱动界面改变下
    经过上一篇的介绍,已经实现了观察者模式的基本内容,接下来要完成的就是将上一篇的发布订阅模式运用到Nue中,实现数据驱动界面改变。在监听数据变化的章节当中,根据指定的区域和数据去编译渲染界面这个步骤处,我写了一个注释,这个注释是这样的:第一步:给外界传入的所有数据都添加get/se......
  • Vue源码学习(十一):计算属性computed初步学习
    好家伙,  1.Computed实现原理if(opts.computed){initComputed(vm,opts.computed);}functioninitComputed(vm,computed){//存放计算属性的watcherconstwatchers=vm._computedWatchers={};for(constkeyincomputed){constuser......