详解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 相关文章推荐
IE6/7/8/9不支持exec的简写方式
May 25 Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
Apr 26 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
Jan 17 Javascript
一个JavaScript递归实现反转数组字符串的实例
Oct 14 Javascript
JS实现判断碰撞的方法
Feb 11 Javascript
JavaScript动态创建div等元素实例讲解
Jan 06 Javascript
jQuery获取浏览器类型和版本号的方法
Jul 05 Javascript
JavaScript实现左右下拉框动态增删示例
Mar 09 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
Dec 20 Javascript
vue 配置多页面应用的示例代码
Oct 22 Javascript
vue 集成jTopo 处理方法
Aug 07 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
Jul 19 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
FCKeditor的安装(PHP)
2007/01/13 PHP
php设计模式 Decorator(装饰模式)
2011/06/26 PHP
php生成二维码不保存服务器还有下载功能的实现代码
2018/08/09 PHP
Jquery中"$(document).ready(function(){ })"函数的使用详解
2013/12/30 Javascript
Jquery实现图片预加载与延时加载的方法
2014/12/22 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
2015/04/02 Javascript
js实现点击链接后延迟3秒再跳转的方法
2015/06/05 Javascript
JS判断页面是否出现滚动条的方法
2015/07/17 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
2015/10/14 Javascript
详解JavaScript中基于原型prototype的继承特性
2016/05/05 Javascript
JS类的定义与使用方法深入探索
2016/11/26 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
2017/02/20 Javascript
Vue.js实现一个todo-list的上移下移删除功能
2017/06/26 Javascript
vue轮播图插件vue-awesome-swiper
2017/11/27 Javascript
微信小程序实现鼠标拖动效果示例
2017/12/01 Javascript
详解如何在微信小程序中愉快地使用sass
2018/07/30 Javascript
js实现一个页面多个倒计时的3种方法
2019/02/25 Javascript
Vue 引入AMap高德地图的实现代码
2019/04/29 Javascript
layui添加动态菜单与选项卡
2019/07/26 Javascript
[02:50]2014DOTA2 TI预选赛预选赛 大神专访第一弹!
2014/05/21 DOTA
Mac下Supervisor进程监控管理工具的安装与配置
2014/12/16 Python
python实现识别手写数字 python图像识别算法
2020/03/23 Python
Python paramiko模块的使用示例
2018/04/11 Python
Python实现基于POS算法的区块链
2018/08/07 Python
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
基于python的ini配置文件操作工具类
2019/04/24 Python
Python使用matplotlib绘制圆形代码实例
2020/05/27 Python
css3翻牌翻数字的示例代码
2020/02/07 HTML / CSS
美国生鲜及杂货电商:FreshDirect
2018/01/29 全球购物
世界上最伟大的马产品:Equiderma
2020/01/07 全球购物
介绍一下SQL注入攻击的种类和防范手段
2012/02/18 面试题
实习自我鉴定
2013/12/15 职场文书
公司年会晚宴演讲稿
2014/01/06 职场文书
安全保卫工作竞聘材料
2014/08/25 职场文书
八一建军节营销活动方案
2014/08/31 职场文书
党员创先争优心得体会
2014/09/11 职场文书