vue computed无法得到this的属性或方法的解决
作者：时光机上敲代码
这篇文章主要介绍了vue computed无法得到this的属性或方法的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
computed无法得到this的属性或方法
场景
在vue中使用es6语法的箭头函数无法正常的使用this下面的方法
原因
计算属性computed不应该使用箭头函数来定义计算属性 因为箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向Vue
- 修改前：
computed: {
isShowDialog: () => {
return this.$store.getters.isShowDialog;
}
},- 修改后：
computed: {
isShowDialog: function() {
return this.$store.getters.isShowDialog;
}
},vue计算属性computed的应用
computed 计算属性
Vue本身支持模板中使用复杂表达式表现业务数据，但是这会使得模板内容过于杂乱，如果确有需求，可以通过computed 计算属性实现，computed 可以对其他data做复杂合成处理。
语法：
new Vue({
el:xx,
data:xx,
computed:{
// 属性名称:function(){} 普通函数赋值
// 属性名称(){} 简易成员函数赋值
属性名称(){
// 业务表达式实现，可以通过this操作data成员
return 返回结果
}
}
})注意：计算属性（普通函数赋值）或（简易成员函数赋值） 都可以，不要使用箭头函数。
使用：
形式上，如何应用data成员，就如何应用计算属性
{{ computed计算属性名称 }} <!-- 模板中-->
this.XXX <!-- Vue实例内部-->computed 应用场景
如果页面需要访问一个数据，这个数据比较复杂，是需要通过其他data经过复杂逻辑制作出来的，就可以使用“计算属性”。
computed 计算属性特点
- 计算属性关联的data如果发生变化，会重新编译执行，获得并使用对应新结果，即响应式(入口)。
- 计算属性的返回信息有变化，使用的地方也会重新编译执行，存在出口响应式。
- 计算属性内部可以使用this关键字访问data成员，与Vue对象等效。
- 每个计算属性都需要通过return关键字返回处理结果。
computed 计算属性与methods方法的区别
- computed计算属性本身有缓存，在关联的data没有变化的情况下，后续会使用缓存结果，节省资源，methods方法没有缓存，每次访问方法体都需要加载执行，耗费资源。
- methods应用逻辑较复杂，例如内部可以嵌入ajax，或互相调用，而computed比较简单，只是操作data的。
computed 计算属性案例
通过computed计算属性获取并应用筛选的品牌数据
步骤：
1.创建计算属性
在Vue实例内部创建计算属性(与el、data、methods并列位置处)，名称为 brandFilters
// 声明计算属性
computed:{
// 创建一个名称为brandsFilters的计算属性
brandsFilters () {
// 可以正常使用this关键字
return this.brandList.filter(item=>{
return item.name.includes(this.keywords)
})
}
},2.应用计算属性
<table v-if="brandsFilters.length>0">
<tr>
<td></td>
<td>序号</td>
<td>名称</td>
<td>创建时间</td>
<td>操作</td>
</tr>
<tr v-for="(item,k) in brandsFilters" :key="item.id">
<td><input type="checkbox"></td>
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.ctime }}</td>
<td><button @click="del(k)">删除</button></td>
</tr>
</table>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。