Vue.js 计算属性不起作用

在本文中，我们将介绍Vue.js中的计算属性以及遇到计算属性不起作用的常见问题及解决方法。计算属性是Vue.js中一种非常有用的特性，可以方便地进行数据的处理和计算。

什么是计算属性

在Vue.js中，计算属性是一种基于数据的衍生特性，它根据它的依赖值进行计算，并返回计算后的结果。计算属性定义在Vue实例上的computed选项中。例如，我们可以通过计算属性来获取一个数组的长度，或者根据其他数据的变化来动态计算出一个新的值。

var vm = new Vue({
  data: {
    arr: [1, 2, 3, 4, 5]
  },
  computed: {
    arrLength: function() {
      return this.arr.length;
    }
  }
})
console.log(vm.arrLength); // 输出: 5

在上面的示例中，我们定义了一个名为arrLength的计算属性，它返回了数组arr的长度。当arr发生变化时，arrLength会自动更新。

计算属性的缓存机制

Vue.js会缓存计算属性的返回结果，只有当相关的响应式依赖发生改变时，计算属性才会重新计算。这意味着在多次调用同一个计算属性时，只有在它的依赖发生变化时，才会重新计算值。

var vm = new Vue({
  data: {
    message: 'Hello, Vue'
  },
  computed: {
    reversedMessage: function() {
      console.log('计算属性被调用'); // 输出: 计算属性被调用
      return this.message.split('').reverse().join('');
    }
  }
})
console.log(vm.reversedMessage); // 输出: 'euV ,olleH'
console.log(vm.reversedMessage); // 输出: 'euV ,olleH'

在上面的示例中，reversedMessage计算属性会将message中的字符反转并返回。注意到，在第二次调用vm.reversedMessage时，计算属性被调用并没有在控制台中输出，而是直接返回上一次的计算结果。

计算属性的使用场景

计算属性适合用于处理多个相关数据的情况，它可以将一些复杂的计算逻辑封装起来，让模板更加简洁和易读。

示例1：商品折扣

假设我们有一个商品对象，其中包含商品的原价和折扣。我们可以通过计算属性来计算出打折后的价格。

var vm = new Vue({
  data: {
    product: {
      price: 100,
      discount: 0.8
    }
  },
  computed: {
    discountedPrice: function() {
      return this.product.price * this.product.discount;
    }
  }
})
console.log(vm.discountedPrice); // 输出: 80

在上面的示例中，我们通过定义一个名为discountedPrice的计算属性，将原价price与折扣discount相乘，得到了打折后的价格。

示例2：过滤器

Vue.js提供了过滤器（filter）的功能，用于对数据进行格式化。我们可以使用计算属性来实现自定义的过滤器功能。

var vm = new Vue({
  data: {
    message: 'Hello, Vue'
  },
  computed: {
    filteredMessage: function() {
      return this.message.toUpperCase();
    }
  }
})
console.log(vm.filteredMessage); // 输出: 'HELLO, VUE'