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),其 ...
随机推荐
- 关于腾讯云server使用FTP具体配置教程
本文文件夹:-------------------------------------------------------- [-] 腾讯云server介绍 关于腾讯云server使用感受 作为开发人 ...
- Javascript和jquery事件--双击事件
在js中和jq中对应的命名都为dblclick,ondblclick,但是ondblclick和dom元素的属性相似,可以在行内设置,也可以使用attr设置. 同时,双击事件需要关注一个问题,那就是双 ...
- php实现 查找输入整数二进制中1的个数
php实现 查找输入整数二进制中1的个数 一.总结 一句话总结: 1.if($j&intval($num)){}的作用是什么? 1 <?php 2 while($num=trim(fge ...
- layui是什么
layui是什么 一.总结 一句话总结:初步看起来比amazeui好看一点点.移动端显示看起来效果真心不错.还有即时聊天那个组件下载,感觉真心不错,可以多去看看. 二.Layui 1.简介 经典模块化 ...
- Android系统开发(5)——Eclipse for C/C++
一.下载JDK 官方下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 二 ...
- 【26.83%】【Codeforces Round #380C】Road to Cinema
time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...
- 项目中使用Prism框架
Prism框架在项目中使用 回顾 上一篇,我们介绍了关于控件模板的用法,本节我们将继续说明WPF更加实用的内容,在大型的项目中如何使用Prism框架,并给予Prism框架来构建基础的应用框架,并且 ...
- [Recompose] Flatten a Prop using Recompose
Learn how to use the ‘flattenProp’ higher order component to take a single object prop and spread ea ...
- JS学习十四天----server端运行JS代码
server端运行JS代码 话说,当今不在client使用JS代码才是稀罕事.因为web应用的体验越来越丰富,client用JS实现的逻辑也越来越多,这造成的结果就是某些差点儿一致的逻辑须要在clie ...
- 【54.08%】【BZOJ 1941】Hide and Seek
Time Limit: 16 Sec Memory Limit: 162 MB Submit: 919 Solved: 497 [Submit][Status][Discuss] Descript ...