之前写过一篇文章 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. 洛谷 P2368 EXCEEDED WARNING B

    P2368 EXCEEDED WARNING B 题目背景 SGU 107 题目描述 求有多少个平方后末尾为987654321的n位数 输入输出格式 输入格式: 整数n 输出格式: 答案,即[b]“平 ...

  2. POJ2029:Get Many Persimmon Trees(二维树状数组)

    Description Seiji Hayashi had been a professor of the Nisshinkan Samurai School in the domain of Aiz ...

  3. 页面事件(Init,Load,PreRender)执行顺序

    简介 对由 Microsoft® Internet 信息服务 (IIS) 处理的 Microsoft® ASP.NET 页面的每个请求都会被移交到 ASP.NET HTTP 管道.HTTP 管道由一系 ...

  4. WinXP局域网共享设置

    关闭局域网共享 1.不允许SAM帐户和共享的匿名枚举(系统默认是允许的). 组策略-计算机配置-Windows 设置-安全设置-本地安全策略-安全选项-网络访问:不允许SAM帐户和共享的匿名枚举. 设 ...

  5. angular 设置全局常量

    一:在项目核心文件core.module.ts中设置全局静态常量 解释:相当于自动注入到inject中. providers:[ { provide:'BASE_CONFIG', useValue:' ...

  6. DC针对pipeline的优化

    set_optimize_register    true compile  -ultra 调整pipleline各级的组合逻辑,使得各级组合逻辑的延迟跟接近 对非pipeline进行优化: regi ...

  7. Let's do our own full blown HTTP server with Netty--转载

    原文地址:http://adolgarev.blogspot.com/2013/12/lets-do-our-own-full-blown-http-server.html Sometimes ser ...

  8. 2、qq物联环境搭建

    1.使用easyopenjtag.openjtag来烧写uboot 2.体验uboot 插讲<网络设置_ping问题解决_远程登录ssh_文件互传ftp> 192.168.1.183 wi ...

  9. ios获取系统时间

    //获取系统时间 NSDate * date=[NSDate date]; NSDateFormatter *dateformatter=[[NSDateFormatter alloc] init]; ...

  10. SDK应该包括什么东西

    作者:朱金灿 来源:http://blog.csdn.net/clever101 如果让你设计和开发一个SDK(软件二次开发包),你认为里面应该有什么东西?首先接口文件和库文件之类是必不可少的,否则别 ...