详解vue中的computed的this指向问题
2018-12-05 20:04
573 查看
今天在写vue项目时,用到了computed计算属性,遇到了使用箭头函数出现this指向问题,这里记录下
1.箭头函数中的this
- 箭头函数内部的this是词法作用域,由上下文确定
- 函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象
2.vue中的computed
使用箭头函数
list: () => { console.log(this) }
不使用箭头函数
allFigure: function() { console.log(this) },
使用get()
allFigure: { get() { console.log(this); } }
3.自己的理解
- 在computed中使用箭头函数的话,会导致this指向的不是整个的vueComponent
- 此时使用匿名函数的形式就可以解决,this指向了vueComponent
- 或者使用对象的形式,用set()、get()方法也不会出现问题
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- vue使用axios时关于this的指向问题详解
- 在VUE中使用定时器 this的指向问题
- 详解JavaScript中this的指向问题
- vue中使用定时器时this指向问题
- 关于在vue中结合数组方法的this的指向问题
- vue使用axios中 this 指向问题
- js中this指向问题实例详解
- 详解JS中定时器setInterval和setTImeout的this指向问题
- vue使用axios中 this 指向问题
- 谈谈 JavaScript 中的 this 指向问题
- es6 箭头函数的this 指向问题
- JavaScript中this的指向问题
- 详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
- this指向问题——严格、非严格模式,事件处理程序
- Js中的this指向问题(2)
- js中this指向问题: (object.getName = object.getName)()为何返回“window”
- 理解js中this的指向问题
- this指向问题