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>

总结

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

相关文章

  • vue 函数调用加括号与不加括号的区别

    vue 函数调用加括号与不加括号的区别

    这篇文章主要介绍了vue 函数调用加括号与不加括号的区别,帮助大家更好的理解和使用vue,感兴趣的朋友可以了解下
    2020-10-10
  • vue-cli 默认路由再子路由选中下的选中状态问题及解决代码

    vue-cli 默认路由再子路由选中下的选中状态问题及解决代码

    这篇文章主要介绍了vue-cli 默认路由再子路由选中下的选中状态问题及解决代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • Vue实现各种动态路由生成的技巧分享

    Vue实现各种动态路由生成的技巧分享

    Vue.js是一种流行的JavaScript框架,用于构建用户界面,Vue具有灵活的路由功能,可以根据特定需求动态生成路由,本文将介绍Vue动态路由生成的常见实现方法,并提供相应的源代码示例,需要的朋友可以参考下
    2025-07-07
  • vue yaml代码编辑器组件问题

    vue yaml代码编辑器组件问题

    这篇文章主要介绍了vue yaml代码编辑器组件问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • 详解如何使用vue和electron开发一个桌面应用

    详解如何使用vue和electron开发一个桌面应用

    这篇文章主要为大家介绍了详解如何使用vue和electron开发一个桌面应用,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • vue中keep-alive,include的缓存问题

    vue中keep-alive,include的缓存问题

    这篇文章主要介绍了vue中keep-alive,include的缓存问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • vue项目设置@路径提示,@代替src方式

    vue项目设置@路径提示,@代替src方式

    文章介绍了在Vue项目中配置`@`路径提示的步骤,包括安装`pathnpminstall path --save`、配置`vue.config.js`、安装VSCode插件`Path Intellisense`、在`settings.json`中配置别名,并重启VSCode
    2025-11-11
  • 如何基于Vue3封装一个好用的Websocket

    如何基于Vue3封装一个好用的Websocket

    这篇文章主要给大家介绍了关于如何基于Vue3封装一个好用的Websocket的相关资料,在Vue3中我们可以将Websocket类封装成一个Vue插件,以便全局使用,需要的朋友可以参考下
    2023-09-09
  • Vue.js实战之使用Vuex + axios发送请求详解

    Vue.js实战之使用Vuex + axios发送请求详解

    这篇文章主要给大家介绍了关于Vue.js使用Vuex与axios发送请求的相关资料,文中介绍的非常详细,相信对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。
    2017-04-04
  • Vue实现跑马灯样式文字横向滚动

    Vue实现跑马灯样式文字横向滚动

    这篇文章主要为大家详细介绍了Vue实现跑马灯样式文字横向滚动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11

最新评论