之前写过一篇文章 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. 使用VHD,让Win XP和 Win2003 运行在内存中

    通过一定的手段可以让XP和2003甚至Win7运行在内存中.我很感兴趣,于是按照网上的资料在VBox虚拟机中测试了一次,运行成功.这几天将其折腾到实体机上. 声明:我的做法和网上的做法有些不一样,我的 ...

  2. Redis实现Mybatis的二级缓存

    一.Mybatis的缓存 通大多数ORM层框架一样,Mybatis自然也提供了对一级缓存和二级缓存的支持.一下是一级缓存和二级缓存的作用于和定义. 1.一级缓存是SqlSession级别的缓存.在操作 ...

  3. C语言深度剖析-----指针数组和数组指针的分析

    指针数组和数组指针的分析 数组类型 定义数组类型 数组指针 这个不可能为数组指针,指向数组首元素 例 指针数组 例    main函数的参数 例 小结

  4. JS数据结构第二篇---链表

    一.什么是链表 链表是一种链式存储的线性表,是由一组节点组成的集合,每一个节点都存储了下一个节点的地址:指向另一个节点的引用叫链:和数组中的元素内存地址是连续的相比,链表中的所有元素的内存地址不一定是 ...

  5. Eclipse高效开发插件汇总

    以下是我整理的自己开发过程中的常用Eclipse插件,按字母排序: (1)    AmaterasUML         介绍:Eclipse的UML插件,支持UML活动图,class图,sequen ...

  6. [WASM] Compile C Code into WebAssembly

    We use the C language instead of pure WAST to create a square root function using WASM Fiddle (https ...

  7. android5.0 BLE 蓝牙4.0+浅析demo搜索(一)

    作者:Bgwan链接:https://zhuanlan.zhihu.com/p/23341414来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 作者:Bgwan 莳萝花 ...

  8. POJ 1384 Piggy-Bank (ZOJ 2014 Piggy-Bank) 完全背包

    POJ :http://poj.org/problem?id=1384 ZOJ:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode ...

  9. Linux system函数返回值

    例: status = system("./test.sh"); 1.先统一两个说法: (1)system返回值:指调用system函数后的返回值,比如上例中status为syst ...

  10. php压缩

    php压缩的一个demo,随便测试了一下,可以用 <?php class PHPZip { private $ctrl_dir = array(); private $datasec = arr ...