脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → computed无法得到this的属性或方法

vue computed无法得到this的属性或方法的解决

 更新时间：2023年07月03日 14:10:10   作者：时光机上敲代码  
这篇文章主要介绍了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>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

最新评论