zoukankan      html  css  js  c++  java
  • Vue中this的绑定

      之前写过一篇文章 ES6与React中this完全解惑 其实Vue也是相同的道理。在Vue的官方文档中提到:

      不要在选项属性或回调上使用箭头函数,比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数是和父级上下文绑定在一起的,this 不会是如你所预期的 Vue 实例,经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。

      箭头函数里this是相同的道理,我更推荐MDN里对箭头函数this的说明“箭头功能不会创建自己的this;它使用封闭执行上下文的this值”

    this.aaa = 3
    
    new Vue({
      data: {
        a: 1
      },
      created: () => console.log(this)
    })

      这段代码在浏览器执行后,输出的this是window对象。

      但在现在的项目中,会发现在Vue的mounted里很多地方用了箭头函数,为什么可以?

      箭头函数中没有this绑定,必须通过查找作用域链来决定其值。如果箭头函数被非箭头函数包含,则this绑定的是最近一层非箭头函数的this;否则,this的值会被设置为全局对象。

  • 相关阅读:
    dockerk个人学习(0)
    ubuntu编译python源码的坑
    查找大目录
    ubuntu 远程gui显示
    paramiko模块
    python open和file的区别
    python type metaclass
    python 生成器 迭代器 yiled
    博客暂停更新,请移步新主页
    win10禁用自动更新服务
  • 原文地址:https://www.cnblogs.com/zhansu/p/10318306.html
Copyright © 2011-2022 走看看