详解vue中的computed的this指向问题


Posted in Javascript onDecember 05, 2018

今天在写vue项目时,用到了computed计算属性,遇到了使用箭头函数出现this指向问题,这里记录下

1.箭头函数中的this

  • 箭头函数内部的this是词法作用域,由上下文确定
  • 函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象

2.vue中的computed

使用箭头函数

list: () => {
  console.log(this)
}

详解vue中的computed的this指向问题

不使用箭头函数

allFigure: function() {
  console.log(this)
},

详解vue中的computed的this指向问题

使用get()

allFigure: {
 get() {
  console.log(this);
 }
}

详解vue中的computed的this指向问题

3.自己的理解

  • 在computed中使用箭头函数的话,会导致this指向的不是整个的vueComponent
  • 此时使用匿名函数的形式就可以解决,this指向了vueComponent
  • 或者使用对象的形式,用set()、get()方法也不会出现问题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 键盘事件的组合使用实现代码
May 04 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
Jun 29 Javascript
js单例模式的两种方案
Oct 22 Javascript
Javascript中的String对象详谈
Mar 03 Javascript
JavaScript实现简单图片翻转的方法
Apr 17 Javascript
js如何实现点击标签文字,文字在文本框出现
Aug 05 Javascript
教你如何终止JQUERY的$.AJAX请求
Feb 23 Javascript
Javascript 普通函数和构造函数的区别
Nov 05 Javascript
解析JavaScript模仿块级作用域
Dec 29 Javascript
微信小程序 支付功能实现PHP实例详解
May 12 Javascript
详解vue-cli快速构建项目以及引入bootstrap、jq
May 26 Javascript
使用vue打包进行云服务器上传的问题
Mar 02 Javascript
使用rollup打包JS的方法步骤
Dec 05 #Javascript
微信小程序入门之广告条实现方法示例
Dec 05 #Javascript
Vue实现本地购物车功能
Dec 05 #Javascript
node和vue实现商城用户地址模块
Dec 05 #Javascript
解决node-sass偶尔安装失败的方法小结
Dec 05 #Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
Dec 05 #Javascript
详解angularjs4部署文件过大解决过程
Dec 05 #Javascript
You might like
php && 逻辑与运算符使用说明
2010/03/04 PHP
理解PHP中的Session及对Session有效期的控制
2016/01/08 PHP
关于PHP转换超过2038年日期出错的问题解决
2017/06/28 PHP
清华大学出版的事半功倍系列 javascript全部源代码
2007/05/04 Javascript
JavaScript将字符串转换为整数的方法
2015/04/14 Javascript
Jquery动态添加输入框的方法
2015/05/29 Javascript
JS模拟键盘打字效果的方法
2015/08/05 Javascript
javascript常用的方法整理
2015/08/20 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
2016/01/14 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
2016/03/11 Javascript
详解Node.js access_token的获取、存储及更新
2017/06/20 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
2017/06/22 Javascript
关于vue.js组件数据流的问题
2017/07/26 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
2017/12/16 Javascript
详解从Vue-router到html5的pushState
2018/07/21 Javascript
Vue.js如何使用Socket.IO的示例代码
2019/09/05 Javascript
[03:38]2014DOTA2西雅图国际邀请赛 VG战队巡礼
2014/07/07 DOTA
python比较2个xml内容的方法
2015/05/11 Python
Python函数式编程指南(三):迭代器详解
2015/06/24 Python
python安装与使用redis的方法
2016/04/19 Python
python使用pil库实现图片合成实例代码
2018/01/20 Python
Python使用matplotlib实现的图像读取、切割裁剪功能示例
2018/04/28 Python
python-opencv 将连续图片写成视频格式的方法
2019/01/08 Python
图文详解Django使用Pycharm连接MySQL数据库
2019/08/09 Python
Python类继承和多态原理解析
2020/02/05 Python
Python实现在Windows平台修改文件属性
2020/03/05 Python
Python3 搭建Qt5 环境的方法示例
2020/07/16 Python
党员的自我评价范文
2014/01/02 职场文书
大学生饮食连锁店创业计划书
2014/01/17 职场文书
办公室文员工作职责
2014/01/31 职场文书
银行竞聘演讲稿
2014/05/16 职场文书
学习教师法的心得体会
2014/09/03 职场文书
课程设计的心得体会
2014/09/03 职场文书
2015年环卫工作总结
2015/04/28 职场文书
反腐倡廉心得体会2016
2016/01/13 职场文书
《进击的巨人》新联动CM 兵长强势出击兽巨人
2022/04/05 日漫