vue中的computed的this指向问题

crossoverJie 发布于2019-08-23 13:53 / 3228人阅读

摘要：今天在写项目时，用到了计算属性，遇到了使用箭头函数出现指向问题，这里记录下箭头函数中的箭头函数内部的是词法作用域，由上下文确定函数体内的对象，就是定义时所在的对象，而不是使用时所在的对象中的使用箭头函数不使用箭头函数使用自己的理解在中使用箭

今天在写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

此时使用allFigure: function() {}的形式就可以解决，this指向了vueComponent

或者使用对象的形式，用set()、get()方法也不会出现问题

正在努力学习中，若对你的学习有帮助，留下你的印记呗（点个赞咯^_^）

往期好文推荐：

判断iOS和Android及PC端

纯css实现瀑布流（multi-column多列及flex布局）

时间戳转换成时间日期格式及去重

微信小程序之购物车和父子组件传值及calc的注意事项

GPU云服务器云服务器 this的指向改变this指向 javaScript中的this js中的this

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99723.html

浅析Vue响应式原理（一）

摘要：浅析响应式原理一的特点之一是响应式，视图随着数据的更新而更新，在视图中修改数据后实例中的数据也会同步更新。对于每个响应式数据，会有两个实例，第一个是在中的闭包遍历，用途显而易见。接收一个回调函数，会在重新求值且值更新后执行。浅析Vue响应式原理（一） Vue的特点之一是响应式，视图随着数据的更新而更新，在视图中修改数据后Vue实例中的数据也会同步更新。内部借助依赖(下文中的Dep类)...

lookSomeone 2019-08-23 13:42 评论0 收藏0
Vue.js中 computed 和 methods 的区别

摘要：官方文档中已经有对其的解释了，在这里把我的理解记录一下。的使用场景模板中的复杂逻辑表达式，为了防止逻辑过重导致不易维护，都应当把相关逻辑放入计算属性。只在相关依赖发生改变时它们才会重新求值。官方文档中已经有对其的解释了，在这里把我的理解记录一下。 computed 的使用场景 HTML模板中的复杂逻辑表达式，为了防止逻辑过重导致不易维护，都应当把相关逻辑放入计算属性。比如这...

Raaabbit 2019-08-23 14:46 评论0 收藏0
Vue.js中 computed 和 methods 的区别

摘要：官方文档中已经有对其的解释了，在这里把我的理解记录一下。的使用场景模板中的复杂逻辑表达式，为了防止逻辑过重导致不易维护，都应当把相关逻辑放入计算属性。只在相关依赖发生改变时它们才会重新求值。官方文档中已经有对其的解释了，在这里把我的理解记录一下。 computed 的使用场景 HTML模板中的复杂逻辑表达式，为了防止逻辑过重导致不易维护，都应当把相关逻辑放入计算属性。比如这...

TwIStOy 2019-08-02 14:06 评论0 收藏0
Vue 实例中的生命周期钩子详解

摘要：实例在文档中经常会使用这个变量名表示实例，在实例化时，需要传入一个选项对象，它可以包含数据模板挂载元素方法生命周期钩子等选项。通俗说就是实例从创建到销毁的过程，就是生命周期。 Vue 实例中的生命周期钩子 Vue 框架的入口就是 Vue 实例，其实就是框架中的 view model ，它包含页面中的业务处理逻辑、数据模型等，它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程...

gityuan 2019-08-20 15:16 评论0 收藏0
vue计算属性Computed的小秘密

摘要：中小秘密的发现之旅首先我们看一段代码请问会间隔的打印出来吗中去掉，再问会间隔的打印出来吗如果第二问没有打印出来，那么在第二问的基础上怎么修改才能再次打印出来呢我先来揭晓答案会打印出来不会打印出来可以用过添加监听，来打印请问为什么呢以下是我的 vue中computed小秘密的发现之旅首先我们看一段代码 {{ count }} new V...

adie 2019-08-26 13:46 评论0 收藏0