详解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 jQuery中的DOM操作
Mar 21 Javascript
JS在textarea光标处插入文本的小例子
Mar 22 Javascript
js使用栈来实现10进制转8进制与取除数及余数
Jun 11 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
Jul 23 Javascript
jQuery简单实现图片预加载
Apr 20 Javascript
JS学习之表格的排序简单实例
May 16 Javascript
JavaScript实现简单图片轮播效果
Aug 21 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
Oct 27 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
Sep 14 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
Nov 08 Javascript
layer.js open 隐藏滚动条的例子
Sep 05 Javascript
Vue与React的区别和优势对比
Dec 18 Vue.js
使用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适配器模式介绍
2012/08/14 PHP
整理的一些实用WordPress后台MySQL操作命令
2013/01/07 PHP
表单提交时自动复制内容到剪贴板的js代码
2007/03/16 Javascript
javascript中的变量是传值还是传址的?
2010/04/19 Javascript
js 优化次数过多的循环 考虑到性能问题
2011/03/05 Javascript
面向对象的Javascript之二(接口实现介绍)
2012/01/27 Javascript
编程语言JavaScript简介
2014/10/16 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
2015/03/16 Javascript
详细解密jsonp跨域请求
2015/04/15 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
2016/01/08 Javascript
VUEJS实战之利用laypage插件实现分页(3)
2016/06/13 Javascript
JS基于面向对象实现的多个倒计时器功能示例
2017/02/28 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
2017/03/02 Javascript
jQuery使用ajax_动力节点Java学院整理
2017/07/05 jQuery
Router解决跨模块下的页面跳转示例
2018/01/11 Javascript
nodejs npm错误Error:UNKNOWN:unknown error,mkdir 'D:\Develop\nodejs\node_global'at Error
2019/03/02 NodeJs
使用jquery的cookie实现登录页记住用户名和密码的方法
2019/03/13 jQuery
ionic3双击返回退出应用的方法
2019/09/17 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
2020/05/15 Javascript
使用python分析git log日志示例
2014/02/27 Python
Python脚本实现网卡流量监控
2015/02/14 Python
举例讲解Python中的死锁、可重入锁和互斥锁
2015/11/05 Python
Python简单实现Base64编码和解码的方法
2017/04/29 Python
目前最全的python的就业方向
2018/06/05 Python
python+selenium实现QQ邮箱自动发送功能
2019/01/23 Python
详解PyTorch手写数字识别(MNIST数据集)
2019/08/16 Python
Django多层嵌套ManyToMany字段ORM操作详解
2020/05/19 Python
一款利用纯css3实现的360度翻转按钮的实例教程
2014/11/05 HTML / CSS
俄罗斯名牌服装网上商店:UNIQUE FABRIC
2019/07/25 全球购物
区三好学生主要事迹
2014/01/30 职场文书
群众路线批评与自我批评
2014/02/06 职场文书
计算机网络及管理学专业求职信
2014/06/05 职场文书
宾馆前台接待岗位职责
2015/04/02 职场文书
婚庆主持词大全
2015/06/30 职场文书
保护动物的宣传语
2015/07/13 职场文书
vite+vue3.0+ts+element-plus快速搭建项目的实现
2021/06/24 Vue.js