详解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 事件属性绑定带参数的函数
Mar 13 Javascript
Javascript 中介者模式实例
Dec 16 Javascript
使用JavaScript switch case 另类写法
Mar 14 Javascript
jQuery Ajax提交表单查询获得数据实例代码
Sep 19 Javascript
解析瀑布流布局:JS+绝对定位的实现
May 08 Javascript
jQuery增加自定义函数的方法
Jul 18 Javascript
使用Web Uploader实现多文件上传
Jun 08 Javascript
Bootstrap3 模态框使用实例
Feb 22 Javascript
JavaScript循环遍历你会用哪些之小结篇
Sep 28 Javascript
JavaScript中的"=、==、==="区别讲解
Jan 22 Javascript
JS浮点数运算结果不精确的Bug解决
Aug 01 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
Sep 09 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
用libtemplate实现静态网页生成
2006/10/09 PHP
PHP数据类型之整数类型、浮点数的介绍
2013/04/28 PHP
Thinkphp框架 表单自动验证登录注册 ajax自动验证登录注册
2016/12/27 PHP
php中类和对象:静态属性、静态方法
2017/04/09 PHP
浅谈PHP中的那些魔术常量
2020/12/02 PHP
firefo xml 读写实现js代码
2009/06/11 Javascript
xml 封装与解析(javascript和C#中)
2009/07/26 Javascript
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
2011/07/10 Javascript
中文路径导致unitpngfix.js不正常的解决方法
2013/06/26 Javascript
浅析JavaScript中的同名标识符优先级
2013/12/06 Javascript
jquery处理页面弹出层查询数据等待操作实例
2015/03/25 Javascript
jquery小火箭返回顶部代码分享
2015/08/19 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
2016/05/24 Javascript
jQuery实现定位滚动条位置
2016/08/05 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
2017/10/26 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
2017/11/08 jQuery
JavaScript对象拷贝与Object.assign用法实例分析
2018/06/20 Javascript
了不起的11个JavaScript代码重构最佳实践小结
2021/01/11 Javascript
[52:41]OG vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/20 DOTA
Python使用bs4获取58同城城市分类的方法
2015/07/08 Python
python实现的生成word文档功能示例
2019/08/23 Python
Python使用Socket实现简单聊天程序
2020/02/28 Python
Python CSS选择器爬取京东网商品信息过程解析
2020/06/01 Python
python 读取yaml文件的两种方法(在unittest中使用)
2020/12/01 Python
Gerry Weber德国官网:优质女性时装,德国最大的时装公司之一
2019/11/02 全球购物
什么是继承
2013/12/07 面试题
机电工程学生自荐信范文
2013/12/07 职场文书
社区学雷锋活动策划方案
2014/01/30 职场文书
董事长秘书职责
2014/01/31 职场文书
一月红领巾广播稿
2014/02/11 职场文书
房地产广告策划方案
2014/05/15 职场文书
2014年银行信贷员工作总结
2014/12/08 职场文书
学校中层领导培训心得体会
2016/01/11 职场文书
python前后端自定义分页器
2022/04/13 Python
Android使用EventBus发送消息,Fragment中接收消息的方法会执行多次
2022/04/24 Java/Android