详解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 相关文章推荐
基于jquery的DIV随滚动条滚动而滚动的代码
Jul 20 Javascript
jQuery+PHP打造滑动开关效果
Dec 16 Javascript
实现高性能JavaScript之执行与加载
Jan 30 Javascript
jQuery实现放大镜效果实例代码
Mar 17 Javascript
js获取元素的标签名实现方法
Oct 08 Javascript
vue组件中点击按钮后修改输入框的状态实例代码
Apr 14 Javascript
使用Math.max,Math.min获取数组中的最值实例
Apr 25 Javascript
浅谈sass在vue注意的地方
Aug 10 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
Sep 27 Javascript
vue中$nextTick的用法讲解
Jan 17 Javascript
vue如何实现自定义底部菜单栏
Jul 01 Javascript
js+springMVC 提交数组数据到后台的实例
Sep 21 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
国产动画《伍六七》原声大碟大卖,啊哈娱乐引领音乐赋能IP的新尝试
2020/03/08 国漫
PHP中for循环语句的几种变型
2007/03/16 PHP
php中将数组存到文件里的实现代码
2012/01/19 PHP
PHP列出MySQL中所有数据库的方法
2015/03/12 PHP
php通过array_merge()函数合并两个数组的方法
2015/03/18 PHP
laravel5创建service provider和facade的方法详解
2016/07/26 PHP
php7安装mongoDB扩展的方法分析
2017/08/02 PHP
ThinkPHP框架实现FTP图片上传功能示例
2019/04/08 PHP
Aster vs KG BO3 第二场2.18
2021/03/10 DOTA
JS去除字符串的空格增强版(可以去除中间的空格)
2009/08/26 Javascript
让ie运行js时提示允许阻止内容运行的解决方法
2010/10/24 Javascript
Javascript引用指针使用介绍
2012/11/07 Javascript
基于jquery的9行js轻松实现tab控件示例
2013/10/12 Javascript
JavaScript如何自定义trim方法
2015/07/28 Javascript
javascript RegExp 使用说明
2016/05/21 Javascript
基于Vue.js的表格分页组件
2016/05/22 Javascript
基于Vuejs和Element的注册插件的编写方法
2017/07/03 Javascript
JavaScript取得gridview中获取checkbox选中的值
2017/07/24 Javascript
JavaScript Date对象应用实例分享
2017/10/30 Javascript
js实现课堂随机点名系统
2019/11/21 Javascript
Selenium执行JavaScript脚本的方法示例
2020/12/31 Javascript
python中装饰器级连的使用方法示例
2017/09/29 Python
在matplotlib的图中设置中文标签的方法
2018/12/13 Python
Python面向对象类编写细节分析【类,方法,继承,超类,接口等】
2019/01/05 Python
Python Gluon参数和模块命名操作教程
2019/12/18 Python
python 逆向爬虫正确调用 JAR 加密逻辑
2021/01/12 Python
Python命令行参数argv和argparse该如何使用
2021/02/08 Python
css3实现冲击波效果的示例代码
2018/01/11 HTML / CSS
联想法国官方网站:Lenovo法国
2018/10/18 全球购物
护士自荐信
2013/10/25 职场文书
网络教育自我鉴定
2014/02/04 职场文书
剪彩仪式主持词
2014/03/19 职场文书
销售经理竞聘书
2014/03/31 职场文书
见习报告的格式
2014/11/04 职场文书
汽车销售员岗位职责
2015/04/11 职场文书
5种方法告诉你如何使JavaScript 代码库更干净
2021/09/15 Javascript