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

场景:在vue中使用es6语法的箭头函数无法正常的使用this下面的方法

原因:计算属性computed不应该使用箭头函数来定义计算属性 因为箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向Vue

修改前:

computed: {
    isShowDialog: () => {
      return this.$store.getters.isShowDialog;
    }
  },

修改后:

computed: {
    isShowDialog: function() {
      return this.$store.getters.isShowDialog;
    }
  },

 

Vue.js 中,`computed` 计算属性是一个非常重要的概念。它允许我们声明**依赖响应式数据的属性**,这些属性会根据其依赖的数据自动更新。与 `methods` 不同的是,`computed` 属性是基于它们的响应式依赖进行缓存的,只有当依赖的数据发生变化时才会重新计算。 以下是一个简单的示例,展示如何使用 `computed`: ```html <!DOCTYPE html> <html> <head> <title>Vue Computed Example</title> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> </head> <body> <div id="app"> <p>原始消息: "{{ message }}"</p> <p>反转后的消息: "{{ reversedMessage }}"</p> </div> <script> new Vue({ el: '#app', data: { message: 'Hello Vue!' }, computed: { // 计算属性 reversedMessage: function () { return this.message.split('').reverse().join(''); } } }); </script> </body> </html> ``` ### 解释: 1. **data**: 定义了响应式数据 `message`。 2. **computed**: 定义了一个计算属性 `reversedMessage`,它依赖于 `message` 数据。 - 当 `message` 发生变化时,`reversedMessage` 会自动重新计算。 - 因为计算属性是缓存的,如果多次调用 `reversedMessage` 而 `message` 没有改变,则会直接返回缓存的结果。 3. 在模板中,`{{ reversedMessage }}` 会显示 `message` 的反转字符串。 ### 优点: - **性能优化**:因为计算属性是缓存的,避免了重复执行相同的逻辑。 - **代码清晰**:将复杂的逻辑封装到计算属性中,使模板更简洁。 --- ### 使用 `computed` vs `methods`: | 特性 | `computed` | `methods` | |------|------------|-----------| | 是否缓存结果 | ✅ 是(基于依赖) | ❌ 否(每次都会调用) | | 适用场景 | 基于现有响应式数据的复杂计算 | 需要每次调用都执行的逻辑 | --- ### 相关问题:
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

时光机上敲代码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值