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的值会被设置为全局对象。
Vue中this的绑定的更多相关文章
- 3-5 Vue中的样式绑定
Vue中的样式绑定: 本案例,简单设计一个<div>的点击绑定事件来改变div的样式效果 方法一:[class] ①(class和对象的绑定) //如上,运用class和一个对象的形式来解 ...
- 黑马vue---17、vue中通过属性绑定绑定style行内样式
黑马vue---17.vue中通过属性绑定绑定style行内样式 一.总结 一句话总结: 如果属性名中带有短线必须加引号,比如: h1StyleObj: { color: 'red', 'font-s ...
- 黑马vue---16、vue中通过属性绑定为元素设置class类样式
黑马vue---16.vue中通过属性绑定为元素设置class类样式 一.总结 一句话总结: 这里就是为元素绑定class样式,和后面的style样式区别一下 vue中class样式绑定方式的相对于原 ...
- vue中数据双向绑定的实现原理
vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Objec ...
- Vue中v-for不绑定key会怎样
Vue的v-for不绑定key,默认行为和绑定key="index"是差不多的,官方没有默认这种行为的情况下,会导致所有列表DOM重新渲染.key="index" ...
- vue.js(7)--vue中的样式绑定
vue中class样式与内联样式的绑定 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- vue中滚动事件绑定的函数无法调用问题
问题描述: 一个包含下拉加载的页面,刷新当前页然后滚动页面,能够正常触发滚动事件并调用回调函数,但是如果是进了某一个页面然后再进的该页面,滚动事件能够触发, 但是回调函数在滚动的时候只能被调用一次. ...
- vue中数据双向绑定注意点
最近一个vue和element的项目中遇到了一个问题: 动态生成的对象进行双向绑定是失败 直接贴代码: <el-form :model="addClass" :rules=& ...
- vue中的双向绑定
概述 今天对双向绑定感兴趣了,于是去查了下相关文章,发现有用脏检查的(angular.js),有用发布者-订阅者模式的(JQuery),也有用Object.defineProperty的(vue),其 ...
随机推荐
- arduino串口输出问题
- (转) 25个必须记住的SSH命令
转自:http://www.cnblogs.com/weafer/archive/2011/06/10/2077852.html OpenSSH是SSH连接工具的免费版本.telnet,rlogin和 ...
- jmeter--基本组件介绍
一.JMeter 介绍 Apache JMeter是100%纯Java桌面应用程序,被设计为用于测试客户端/服务端结构的软件(例如web应用程序).它可以用来测试静态和动态资源的性能,例如:静态文件, ...
- mysql 配置,还得多看看~
http://blog.chinaunix.net/uid-20639775-id-154429.html
- poj 3071 Football(线段树+概率)
Football Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 2801 Accepted: 1428 Descript ...
- codeforces Round 246 D. Prefixes and Suffixes (后缀数组 || KMP)
题目大意: 求一个子串,子串既是前缀又是后缀. 然后再求出它在整个串中出现的次数. 思路分析: 能够非常easy想到怎样推断一个串既是前缀又是后缀. 仅仅须要它与 sa[0] 的lcp 等于 整个串的 ...
- C#DateTime与Unix时间戳的转换
/// <summary> /// Unix时间戳转为C#格式时间 /// </summary> /// <param name="timeStamp" ...
- Ehcache与Memcache的差别
ehcache是纯java编写的.通信是通过RMI方式,适用于基于java技术的项目. memcachedserver端是c编写的.client有多个语言的实现,如c.php(淘宝.sina等各大门户 ...
- Android5.0(Lollipop) BLE蓝牙4.0+浅析概念(四)
作者:Bgwan链接:https://zhuanlan.zhihu.com/p/23679793来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 置顶:此文转载CSDN博 ...
- Yarn架构基本概况(一)
1)引言 针对MRv1在扩展性.可靠性,资源利用率和多框架的支持上存在着明显的不足.进而诞生了下一代的MapReduce的计算框架MapReduce Version2,MRV1中有一个非常大的问题就是 ...