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),其 ...
随机推荐
- maven的pom.xml配置文件讲解
<project xmlns="http://maven.apache.org/POM/4.0.0 " xmlns:xsi="http://www.w3.o ...
- 洛谷 P2790 ccj与zrz之积木问题
P2790 ccj与zrz之积木问题 题目背景 ccj和zrz无聊到了玩起了搭积木...(本题选自uva101,翻译来自<算法竞赛入门经典2>) 题目描述 从左到右有n个木块,编号从0到n ...
- python3 登录验证小程序,同一用户输错三次密码,锁定账户
''' 让用户输入用户名密码 认证成功后显示欢迎信息用户3次认证失败后,退出程序,再次启动程序尝试登录时,还是锁定状态''' # !/usr/bin/env python # -*- coding:u ...
- amazeui学习笔记--js插件(UI增强4)--下拉组件Dropdown
amazeui学习笔记--js插件(UI增强4)--下拉组件Dropdown 一.总结 1.am-dropdown(及其孩子):控制下拉列表的样式 2.data-am-dropdown(及其孩子):控 ...
- JSONP的使用示例(以及jquery版jsonp)超简单
前言: 平时工作中很少跨域,很少用到jsonp,但是几乎每次面试都会被问到这个问题.很崩溃. 菜鸟教程上的jsonp教程就很好.这里做个笔记,自己捋一遍. Jsonp(JSON with Paddin ...
- 把git仓库从码云迁到github,及git常用命令
前言 刚开始建仓库的时候,因为网络的原因选择了国内的码云.后来又想换成github,毕竟平时github使用率比较高. 替换远程仓库地址方式如下: git remote set-url origin ...
- (转)Bash 快捷键 完整版
转自:http://www.opsers.org/linux-home/base/full-version-of-bash-keyboard-shortcuts.html#toc-3 生活在 Bash ...
- P2P网贷第三方托管模式存在5大缺陷,托管机构才是最大赢家
1.注册开户需要2次,用户体验很差劲儿. 理财人和借款人,首先在平台注册,然后还要在第三方托管账户注册. 很多类似的地方,用户体验非常差劲. 比如,密码4个. 平台:登录密码.交易密码 ...
- SIP对话、事务详解
1,SIP对话的建立(图片来自于网络) SIP对话的建立包括invite request,response,ACK.其中response包含临时响应(1XX response)和最终响应(非1XX r ...
- ArcGIS 中要素的查询与修改
转自nimeila的回答 求C# ArcGIS Engine修改选中要素的属性,单要素都行 RLAlterFrm RLalter = new RLAlterFrm(); RLalter.ShowDia ...