生命周期钩子

Vue组件经历初始化过程,包括数据监听、模板编译和DOM挂载等,其间运行生命周期钩子函数。mounted、updated和unmounted是最常用的钩子。在钩子函数中,this指向组件实例。例如,mounted钩子在DOM创建后执行。keep-alive是Vue的内置组件,用于缓存组件,提高性能,避免重复创建。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤,比如设置好数据侦听,编译模板,挂载实例到 DOM,以及在数据改变时更新 DOM。在此过程中,它也会运行被称为生命周期钩子的函数,让开发者有机会在特定阶段运行自己的代码。

注册周期钩子

举例来说,mounted 钩子可以用来在组件完成初始渲染并创建 DOM 节点后运行代码:

export default {
  mounted() {
    console.log(`the component is now mounted.`)
  }
}

还有其他一些钩子,会在实例生命周期的不同阶段被调用,最常用的是 mountedupdated 和 unmounted

所有生命周期钩子函数的 this 上下文都会自动指向当前调用它的组件实例。注意:避免用箭头函数来定义生命周期钩子,因为如果这样的话你将无法在函数中通过 this 获取组件实例。

生命周期
生命周期: Vue是一个构造函数,当执行执行这个函数时,相当于初始化vue实例;
在创建实例过程中,需要设置数据监听,编译模板,将实例挂载到DOM上,数据更新能够让DOM也更新,
在这个初始化,又会不同阶段默认调用一些函数执行,这些函数就是生命周期的钩子函数;


生命周期钩子函数,让够让咱们在初始化实例时,添加自己的代码;
生命周期的钩子函数中的this,会默认指向vue的实例;

钩子函数
beforeCreate created[可以获取数据及方法]
beforeMount mounted[可以获取到真实的DOM]
beforeUpdate updated[数据更新执行]
beforeDestroy destroyed[销毁vue实例,不再具有双向数据绑定的特点]
 

 生命周期(其他三个钩子函数)
component 和keep-alive
component 和keep-alive 都是内置组件,在VUE代码已经内置好的组件;
闭合标签使用组件
component : 内置组件,根据is属性来显示对应的组件;is属性的属性值保持和组件名字一致;然后可以显示对应的组件
 

keep-alive : keep: 保持 alive:活力
VUE项目的优化: keep-alive

keep-alive : keep: 保持 alive:活力
<keep-alive>
keep-alive:用于缓存组件,如果该组件还会再启用,那么可以使用keep-alive进行组件缓存和优化,提高性能,缓存的组件不需要销毁,也不需要再创建
<component v-bind:is=“one”> //如果是动态属性,那么会去data中取值
</keep-alive>
 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值