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的值会被设置为全局对象。

  • 相关阅读:
    第十二周工作总结
    第八周工作总结
    冲刺2
    冲刺1
    用户场景分析
    用户场景分析
    水王在哪
    课堂练习-4个数的和
    《大道至简》第一章读后感
    ELF Format 笔记(三)—— Section Types
  • 原文地址:https://www.cnblogs.com/zhansu/p/10318306.html
Copyright © 2011-2022 走看看