在vue生命周期里调用函数时犯的一个错误

最近都在用es6的语法开发,也深刻感受到了箭头函数的魅力,所以在写道vue生命周期函数的时候也很惯性的用了箭头函数的写法,箭头函数this的指向在这个时候却引出了bug。

在vue中所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文,因此 this 与你期待的 Vue 实例不同。

methods: {
  gerQrCode() {
  }
}
//生命周期函数要用普通函数的形式
//写成箭头函数形式的话引用方法时会报错方法未定义。
mounted() {
  this.getQrCode()
},
复制代码

转载于:https://juejin.im/post/5bbe0d46f265da0af1615e37

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3 ,可以通过在组件定义生命周期函数来调用特定的函数。以下是在 Vue3 常用的一些生命周期函数及其对应的钩子函数: - beforeCreate:在实例初始化之后,数据观测(data observer)和 event/watcher 事件配置之前被调用。在这个阶段,你还不能访问到 data 和 methods 的数据和方法。 - created:在实例创建完成后被立即调用。在这个阶段,实例已完成以下配置:数据观测(data observer)、属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。 - beforeMount:在挂载开始之前被调用:相关的 render 函数首次被调用。 - mounted:el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子函数。此时,组件已经完成了以下的配置:编译模板成 render 函数,将 render 函数渲染成真实 DOM 结构,然后渲染到页面。 - beforeUpdate:在数据更新之前调用,发生在虚拟 DOM 重新渲染和打补丁之前。可以在该钩子函数进一步地更改数据,并且不会触发其他的重新渲染。 - updated:组件的 VNode 已更新,但可能还没有渲染到视图。数据更改导致的重渲染和打补丁已完成。 - beforeUnmount:在实例销毁之前调用。在这一步,实例仍然完全可用。 - unmounted:实例销毁后调用。在这一步,所有的指令已被解绑,所有的事件监听器已被移除,所有的子实例也已经被销毁。 你可以在组件定义这些生命周期函数,然后在相应的钩子函数调用你希望执行的函数。例如,在 created 钩子函数调用一个名为 initData 的方法,你可以这样写: ``` export default { created() { this.initData(); }, methods: { initData() { // 执行初始化数据的代码 } } } ```

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值