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),其 ...
随机推荐
- 2016最热门的PHP框架(一共五款)
摘要: 兄弟连IT教育作为全国最大的PHP培训机构,迄今已有10年的教育历史.6大特色课程:PHP编程.安卓培训.JAVAEE+大数据.UI设计.HTML5培训.云计算架构师,在目前IT市场特别火,每 ...
- tomcat的classloader机制
本系列博客打算分析一下tomcat7.x的源码,其中可能会穿插一些java基础知识的介绍 读tomcat的源码的时候,我建议和官方的User Guide一起阅读,明白tomcat做某件事情的目的之后 ...
- iOS_04_学习ios开发的准备
学习ios开发的准备 * 英语水平:看懂26个英文字母. * 计算机专业:不要求计算机专业,但得有脑子. * 学习态度:积极思考.积极动手.能吃苦.有兴趣. * 编程语言:C语言.C++(可选).Ob ...
- CSS垂直居中的实现
这个问题可以说是老生常谈了,面试时经常问道,一直没整理过,这次做个系统梳理 1.利用display:table实现 从caniuse.com上查到,display:table可以兼容到IE8,以目前环 ...
- css3-10 如何使用滚动条
css3-10 如何使用滚动条 一.总结 一句话总结:给设置了宽高的块标签使用,直接将overflow属性写到style里面即可. 1.滚动条的使用对象时谁? 一般是div,当div比较小(设置了宽高 ...
- mac系统创建.开头文件.htaccess
thinkphp5 隐藏index.php的时候需要用的.htaccess文件,但是mac默认不让创建这种文件 感谢 https://blog.csdn.net/gyz413977349/articl ...
- java痛苦学习之路[十二]JSON+ajax+Servlet JSON数据转换和传递
1.首先client须要引入 jquery-1.11.1.js 2.其次javawebproject里面须要引入jar包 [commons-beanutils-1.8.0.jar.commons-c ...
- Android中的动画详解系列【4】——Activity之间切换动画
前面介绍了Android中的逐帧动画和补间动画,并实现了简单的自定义动画,这一篇我们来看看如何将Android中的动画运用到实际开发中的一个场景--Activity之间跳转动画. 一.定义动画资源 如 ...
- [Django] ModelViewSet from rest_framework and Router
To build rest api easily, we can use ModelViewSet from rest_framework. It provides GET, POST, DELETE ...
- 微信开发学习日记(六):weiphp框架
最近重点在看weiphp这个开源的第三方微信公众平台框架. 在网上找微信资料,找到了这个.很早之前,就初步学习了Thinkphp和Onethink2个开源框架,当看到weiphp是用这2个框架开发的时 ...