Vue——生命周期

生命周期图例

 

beforeCreate() {
    // 实例或组件 要开始被创建了
    // 还没创建好之前 是不能使用实例中的任何成员的
    // 针对要去做ajax 请求的组件可以预先在beforeCreate 提前ajax请求
},
created() {
    // 实例或组件 已经被创建好了
    // created 里面是可以访问到当前实例的任何成员的
    // 可以初始化一些data数据 (检测数据或者初始化数据)
},
beforeMount() {
    // 开始挂载元素(挂载元素之前)
    // 没挂载好之前,是拿不到组件里的dom
    // 如果想要获取组件挂载之前的一些东西,在beforeMount里可以操作
},
mounted() {
    // 主要是在这个过程之后我们在去获取组件的dom元素是最保险的
},
beforeUpdate() {
    // 要让beforeUpdate 和 updated 这两个钩子触发 必须是模板发生了变化才会触发
    // 模板更新之前
},
updated() {
    // 模板更新之后
    // 要让beforeUpdate 和 updated 这两个钩子触发 必须是模板发生了变化才会触发
}

 

Vue3与Vue2在生命周期上有一些显著的变化。Vue3中的生命周期函数相较于Vue2有所简化和优化,旨在提高性能和开发体验。 首先,Vue3中去掉了Vue2中的beforeCreate和created两个生命周期钩子函数。这是因为在Vue3中引入了Composition API,允许我们使用setup函数来替代beforeCreate和created的功能。setup函数会在组件实例被创建之前调用,可以用来进行变量的初始化和副作用的处理。 其次,Vue3中引入了一个新的生命周期钩子函数——beforeMount。在组件即将被挂载到DOM之前,beforeMount函数会被调用。这个阶段可以用来进行一些准备工作,比如请求数据或者绑定事件。 接下来是mount阶段,即挂载阶段,此阶段对应Vue2中的mounted生命周期函数。在mount阶段,组件的template被编译成真实的DOM元素,并插入到页面中。我们可以在mount函数中执行一些与DOM相关的操作。 接着是update阶段。在Vue2中,我们可以使用beforeUpdate和updated这两个生命周期钩子函数来监听数据的变化,并在数据更新后执行相应的操作。而在Vue3中,我们可以使用watchEffect函数来实现相同的效果。watchEffect会监听组件中响应式属性的变化,并自动执行相应的回调函数。 最后是unmount阶段,即组件被卸载的阶段。在Vue3中,我们可以使用onUnmounted函数来代替Vue2中的beforeDestroy和destroyed生命周期函数。onUnmounted会在组件被销毁之前执行,我们可以在这个时候做一些清理工作,比如取消订阅或者清除定时器。 总的来说,Vue3中的生命周期函数进行了一些优化和简化,提高了性能和开发体验。通过引入Composition API和watchEffect函数,我们可以更加灵活地处理组件的生命周期
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值