之前写过一篇文章 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的值会被设置为全局对象。

Vue中this的绑定的更多相关文章

  1. 3-5 Vue中的样式绑定

    Vue中的样式绑定: 本案例,简单设计一个<div>的点击绑定事件来改变div的样式效果 方法一:[class] ①(class和对象的绑定) //如上,运用class和一个对象的形式来解 ...

  2. 黑马vue---17、vue中通过属性绑定绑定style行内样式

    黑马vue---17.vue中通过属性绑定绑定style行内样式 一.总结 一句话总结: 如果属性名中带有短线必须加引号,比如: h1StyleObj: { color: 'red', 'font-s ...

  3. 黑马vue---16、vue中通过属性绑定为元素设置class类样式

    黑马vue---16.vue中通过属性绑定为元素设置class类样式 一.总结 一句话总结: 这里就是为元素绑定class样式,和后面的style样式区别一下 vue中class样式绑定方式的相对于原 ...

  4. vue中数据双向绑定的实现原理

    vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Objec ...

  5. Vue中v-for不绑定key会怎样

    Vue的v-for不绑定key,默认行为和绑定key="index"是差不多的,官方没有默认这种行为的情况下,会导致所有列表DOM重新渲染.key="index" ...

  6. vue.js(7)--vue中的样式绑定

    vue中class样式与内联样式的绑定 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  7. vue中滚动事件绑定的函数无法调用问题

    问题描述: 一个包含下拉加载的页面,刷新当前页然后滚动页面,能够正常触发滚动事件并调用回调函数,但是如果是进了某一个页面然后再进的该页面,滚动事件能够触发, 但是回调函数在滚动的时候只能被调用一次. ...

  8. vue中数据双向绑定注意点

    最近一个vue和element的项目中遇到了一个问题: 动态生成的对象进行双向绑定是失败 直接贴代码: <el-form :model="addClass" :rules=& ...

  9. vue中的双向绑定

    概述 今天对双向绑定感兴趣了,于是去查了下相关文章,发现有用脏检查的(angular.js),有用发布者-订阅者模式的(JQuery),也有用Object.defineProperty的(vue),其 ...

随机推荐

  1. Android Studio - no debuggable applications 的解决的方法

    之前logcat总是无法显示调试应用的信息 曾经我都是卸载重装.后来发如今StackOverflow有一个哥们说的非常对.一次就成功. 原话是这么说的: You also should have To ...

  2. Qt Creator 源码学习 03:qtcreator.pro

    当我们准备好 Qt Creator 的源代码之后,首先进入到它的目录,来看一下它的源代码目录有什么奥秘. 这里一共有 9 个文件夹和 9 个文件.我们来一一看看它们都是干什么用的. .git: 版本控 ...

  3. BaaS简介

    SaaS(软件即服务:Software as a Service).IaaS(基础设施即服务:Infrastructure as a Service)和PaaS(平台即服务:Platform as a ...

  4. C语言深度剖析-----数组参数和指针参数分析

    数组退化的意义 当向函数传递数组时, 二维数组参数 等价关系 注意事项 只能去一维数组 无法向一个函数传递一个任意的多维数组,注释地方出错 传递与访问二维数组的方式 动态地算出二维数组的列

  5. 【例题 6-5 UVA 12657 】Boxes in a Line

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 双向链表模拟题. 移动的时候,要注意它就在所需要的位置的情况.那种情况不移动. (如果已经在所需位置了,还用链表的插入方式强行移动的 ...

  6. Spring 定时器 No qualifying bean of type [org.springframework.scheduling.TaskScheduler] is defined(转)

    最近项目里面,用了spring的定时任务,一直以来,项目运行的不错.定时器也能正常使用.可是,今天启动项目测试的时候,盯着启动Log看了一阵子,突然间发现,启动的Log中居然有一个异常,虽然一闪而过, ...

  7. 快速理解Java中的五种单例模式(转)

    解法一:只适合单线程环境(不好) package test; /** * @author xiaoping * */ public class Singleton { private static S ...

  8. iOS ASIHTTPRequest

    ASIHTTPRequest对CFNetwork API进行了封装,并且使用起来非常简单,用Objective-C编写,可以很好的应用在Mac OS X系统和iOS平台的应用程序中.ASIHTTPRe ...

  9. watchdog的正确使用方法

    关于watchdog应该有过单片机学习经历的人.都比較熟悉.但watchdog的正确使用方法,恐怕大家假设没有经历过实际产品的开发不会有深入的理解. 瑞萨RL78系列的单片机自身带有watchdog, ...

  10. KMP小结

    1. KMP模版: 代表题目:POJ 3641 Oulipo KMP http://blog.csdn.net/murmured/article/details/12871891 char P[MAX ...