Vue-生命周期函数

1、生命周期函数

生命周期函数也也叫钩子函数、生命钩子,相当于是一种特殊事件,当vm实例在整个运行的过程中,会在不同的时期去执行特定的函数,这样的函数就是vue的生命周期函数

(1)beforeCreate()

​vm实例创建之前

​data都还没有构建出来数据,方法也还没有构建出来

(2)created()

​vm实例创建完毕

​data 方法 等等工具已经构建完毕,但是vm还没有挂载到界面上去,可以在这个钩子中做页面第一次加载时的网络请求

(3)beforeMount()

​挂载到DOM之前

​data等vm对象的工具构建完毕,正在挂载到DOM中

(4)mounted()

​挂载到DOM上了

​有点像window.onload,这里也可以做网络请求,页面加载了之后的所有业务,都可以在这里,这个函数执行标志着vm和dom成功关联==>随意操作vm来间接的操作dom

(5)beforeUpdate()

​更新数据之前

(6)updated()

​更新数据完毕

更新的是data,这时候还没有刷新UI,它会去找一个合适的时机去刷新UI,这个钩子调用之后才会刷新UI

(7)beforeDestroy()

​销毁实例之前

​常常去把一些运行着的代码停下来,本地或网络请求来记录用户的配置信息或者偏好设置

(8)destroyed()

​实例销毁了

​钩子调用之后才会销毁

2、为什么要用生命周期函数?

  • 为了把整个运行期间的业务区分的很明显
  • 能够更好的帮助我们把产品的业务逻辑实现了
  • 更有利于我们维护产品 和 修改需求
  • 能够让我们写出更高质量的产品的代码

3、网络请求应该在什么钩子中,为什么?(重点!!!)

可以放在data生成以后更新数据之前的所有钩子中,具体的更具业务需求来 常见的放在created或者 mounted中,因为网络请求下来的数据,常常会存在data容器中,所以必须要等到data生成之后才做网络请求。

​created:因为有时候我们希望异步的网络请求和vm的挂载同时进行 体现出CPU多核的优势

​mounted:因为有时候我们希望本地的UI骨架已经加载完毕以后再去请求数据刷新UI

4、销毁钩子可以做什么?

​常常去把一些运行着的代码停下来,做善后的工作本地或者网络请求来记录用户的配置信息或者偏好设置

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值