vue中的this指向问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script src="https://unpkg.com/vue@2.5.9/dist/vue.js"></script>
</head>
<div id="app" style="width: 100%;height: auto;font-size:20px;">
<p id="id1"></p>
<p id="id2"></p>
</div>
<script type="text/javascript">
var message = "Hello!";
var app = new Vue({
el:"#app",
data:{
message: "你好！"
},
created: function() {
this.showMessage1(); //this 1
this.showMessage2(); //this 2
},
methods:{
showMessage1:function(){
setTimeout(function() {
document.getElementById("id1").innerText = this.message; //this 3
}, 10)
},
showMessage2:function() {
setTimeout(() => {
document.getElementById("id2").innerText = this.message; //this 4
}, 10)
}
}
});
</script>
</html>
第一个输出英文"Hello!”，第二个输出中文“你好！”。这说明了showMessage1()里的this指的是window，而showMessage2()里的this指的是vue实例。
※ 对于普通函数（包括匿名函数），this指的是直接的调用者，在非严格模式下，如果没有直接调用者，this指的是window。showMessage1()里setTimeout使用了匿名函数，this指向
window。
※ 箭头函数是没有自己的this，在它内部使用的this是由它定义的宿主对象决定。showMessage2()里定义的箭头函数宿主对象为vue实例，所以它里面使用的this指向vue实例。
注：
【普通函数的this】
普通函数的this是由动态作用域决定，它总指向于它的直接调用者。具体可以分为以下四项：
this总是指向它的直接调用者， 例如 obj.func() ,那么func()里的this指的是obj。
在默认情况(非严格模式,未使用 'use strict')，如果函数没有直接调用者，this为window
在严格模式下,如果函数没有直接调者，this为undefined
使用call,apply,bind绑定的，this指的是绑定的对象
绑定vue实例到this的方法
为了避免this指向出现歧义，有两种方法绑定this。
使用bind
showMessage1()可以改为：
showMessage1:function(){
setTimeout(function() {
document.getElementById("id1").innerText = this.message; //this 3
}.bind(this), 10)
} 对setTimeout()里的匿名函数使用bind()绑定到vue实例的this。这样在匿名函数内的this也为vue实例。
把vue实例的this赋值给另一个变量再使用
showMessage1()也可以改为
showMessage1:function(){
var self = this;
setTimeout(function() {
document.getElementById("id1").innerText = self.message; //改为self
}.bind(this), 10
}
vue中的this指向问题的更多相关文章
- Vue中关于this指向的问题
由Vue管理的函数 例如: computed 计算属性 watch 监视属性 filters (Vue3中已弃用且不再支持) 过滤器 .... 上述属性里配置的函数不要采用箭头函数写法,因为箭头函数没 ...
- vue 中this指向遇到的坑
vue中的this指向问题 如果方法中没有使用箭头函数,记得把this赋值给另一个变量再使用.
- vue中使用定时器时this指向问题
在写一个很小的demo时,用的普通函数写法,没有用es6箭头函数,发现this变化了,后来查找到了问题所在: 箭头函数中的this指向是固定不变(定义函数时的指向),在vue中指向vue 普通函数中的 ...
- (vue.js)vue中引用了别的组件 ，如何使this指向Vue对象
Vue中引用了别的组件 ,如何使this指向Vue对象 今天学习Vue组件传值, 通过创建Vue实例, 广播和监听实现传值, 但是传值之后无法直接将得到的值应用到Vue对象, 因为这相当于引用改了别的 ...
- vue中使用Ajax(axios)、vue函数中this指向问题
Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求.Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中. axios中文文档库:http ...
- vue中使用定时器时this指向
箭头函数中的this指向是固定不变(定义函数时的指向),在vue中指向vue; 普通函数中的this指向是变化的(使用函数时的指向),谁调用的指向谁. 箭头函数: let timerOne = s ...
- 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...
- 理解Vue中的Render渲染函数
理解Vue中的Render渲染函数 VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数.比如如下我想要实现 ...
- Vue中ajax返回的结果赋值
这是第二次在项目中遇到此问题,ajax请求成功后在success函数中为Vue实例data里的变量赋值,却失败了 new Vue({ el:'#app', data:{ msg:'' }, creat ...
随机推荐
- 设计模式 笔记 外观模式 Facade
//---------------------------15/04/16---------------------------- //Facade 外观模式-----对象结构型模式 /* 1:意图: ...
- Python RASP 工程化:一次入侵的思考
前言 今天讲的内容会很深,包括一些 Python的高级用法和一些自己创造的黑科技,前半部分内容你们可能听过,后半部分内容就真的是黑科技了... 深入的研究和思考,总会发现很多有意思的东西.每一次的研究 ...
- 面向 Photoshop 的英特尔® Texture Works 插件
英特尔对 Photoshop* 进行了扩展,以通过插件充分利用最新的图像压缩方法 (BCn/DXT).该插件旨在为图形工作者提供一款获取卓越压缩结果的工具,并提高 Photoshop* 中的压缩速度. ...
- java保留两位小数4种方法（转载）
喵喵最近经常遇到小数点保留的问题,转载一篇Java里面的几种小数点位数控制方法. 这是转载的原地址:https://www.cnblogs.com/chenrenshui/p/6128444.html ...
- 微软职位内部推荐-SW Engineer II for Azure Network
微软近期Open的职位: Software Engineer II The world is moving to cloud computing. Microsoft is betting Windo ...
- Daily Scrumming* 2015.12.15（Day 7）
一.团队scrum meeting照片 二.成员工作总结 姓名 任务ID 迁入记录 江昊 任务1036 https://github.com/buaaclubs-team/temp-front/com ...
- 审评（HelloWorld团队）
炸弹人:我觉得炸弹人的构想很不错,很像以前玩的qq堂,不过上课时讲的不够深入,我没有找到项目的思路,项目的介绍也很粗糙,后面说的目标很大,希望你可以实现,我觉得越多的功能,就意味着越多的工作量,总的来 ...
- 冲刺Two之站立会议6
今天继续了昨天的工作,对视频进行优化.因为昨天的工作没有达到预期的效果,所以又继续对音质和画面质量做了相应的优化.还对相应的聊天室界面进行了优化.
- (Alpha)Let's-个人贡献分
Alpha阶段个人贡献分如下: (1201)林珣玙 60 (1190)康家华 55 (1194)刘彦熙 53 (1168)仇栋民 48 (1183)马瑶华 42 (1222)张启东 42
- 开源中文分词框架分词效果对比smartcn与IKanalyzer
一.引言: 中文分词一直是自然语言处理的一个痛处,早在08年的时候,就曾经有项目涉及到相关的应用(Lunce构建全文搜索引擎),那时的痛,没想到5年后的今天依然存在,切分效果.扩展支持.业务应用等方面 ...