Vue学习总结--生命周期钩子函数

vue的本质说白了是对前端的dom及对应数据的操作,

那么对其各个生命周期的操作就得有所理解,先看其官网上的一张图:

钩子函数如何使用,看下面的示例:

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})

在使用过程中,官方特意提出如下注意事项:

不要在选项 property 或回调上使用箭头函数,
比如 
created: () => console.log(this.a) 
或 
vm.$watch('a', newValue => this.myMethod())。
因为箭头函数并没有 this,this 会作为变量一直向上级词法作用域查找,直至找到为止,
经常导致
 Uncaught TypeError: Cannot read property of undefined 
或 
Uncaught TypeError: this.myMethod is not a function 之类的错误。

至于各个钩子函数在何时使用,当你理解了其意思后,只能根据实际业务去自行判断;

列如:

我经常会将初始化页面时用到的一些调用后端接口加载数据的请求放在created中去执行;

而对于一些输入值后的校验会经常放在updated中去执行。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 2和Vue 3都有一些常用的生命周期钩子函数,但在Vue 3中有一些变化。以下是Vue 2和Vue 3中常用的生命周期钩子函数Vue 2中的生命周期钩子函数: 1. beforeCreate: 实例创建之前调用,此时数据观测(data observer)和事件配置(event/watcher)尚未初始化。 2. created: 实例创建完成后调用,此时已经完成了数据观测(data observer)和事件配置(event/watcher)。 3. beforeMount: 在挂载之前调用,在这个时候模板已经编译完成,但是还未挂载到页面中。 4. mounted: 在挂载完成后调用,此时组件已经被挂载到页面中,可以访问到DOM元素。 5. beforeUpdate: 在数据更新之前调用,发生在虚拟DOM重新渲染和打补丁之前。 6. updated: 在数据更新之后调用,发生在虚拟DOM重新渲染和打补丁之后。 7. beforeDestroy: 在实例销毁之前调用,此时实例仍然完全可用。 8. destroyed: 在实例销毁之后调用,此时实例已经被销毁,所有的事件监听器和子实例都被删除。 Vue 3中的生命周期钩子函数: 1. beforeCreate: 与Vue 2相同,在实例创建之前调用。 2. created: 与Vue 2相同,在实例创建完成后调用。 3. beforeMount: 与Vue 2相同,在挂载之前调用。 4. mounted: 与Vue 2相同,在挂载完成后调用。 5. beforeUpdate: 与Vue 2相同,在数据更新之前调用。 6. updated: 与Vue 2相同,在数据更新之后调用。 7. beforeUnmount: 在组件卸载之前调用,此时组件仍然完全可用。 8. unmounted: 在组件卸载之后调用,此时组件已经被卸载,所有的事件监听器和子组件都被删除。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值