Vue计算 - JavaScript

Vue.js是一个流行的JavaScript框架，它的计算属性是其核心特性之一。计算属性是一种可以根据Vue实例中的其他属性计算出值的属性。

语法

计算属性的语法如下所示：

computed: {
  propertyName: function() {
    // 计算并返回属性的值
  }
}

使用计算属性

计算属性的一个常见用例是过滤和排序数据。例如，考虑以下示例，其中使用计算属性对电影数据进行排序：

<div id="app">
  <table>
    <thead>
      <tr>
        <th>Title</th>
        <th>Rating</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="movie in sortedMovies">
        <td>{{ movie.title }}</td>
        <td>{{ movie.rating }}</td>
      </tr>
    </tbody>
  </table>
</div>

<script>
new Vue({
  el: "#app",
  data: {
    movies: [
      { title: 'The Shawshank Redemption', rating: 9.2 },
      { title: 'The Godfather', rating: 9.1 },
      { title: 'The Dark Knight', rating: 9.0 }
    ]
  },
  computed: {
    sortedMovies: function() {
      return this.movies.sort(function(a, b) {
        return b.rating - a.rating;
      });
    }
  }
});
</script>

在上面的示例中，我们定义了一个计算属性“sortedMovies”，它返回一个按照“rating”属性排序的新数组。此计算属性然后用于v-for指令来呈现排序后的电影列表。

监视属性

除了计算值之外，计算属性还提供了一种监视对象属性的机制。例如，我们可以使用计算属性来根据输入字段的值过滤电影列表：

<div id="app">
  <input type="text" v-model="filter">
  ...
</div>

<script>
new Vue({
  el: "#app",
  data: {
    filter: "",
    movies: [
      { title: 'The Shawshank Redemption', rating: 9.2 },
      { title: 'The Godfather', rating: 9.1 },
      { title: 'The Dark Knight', rating: 9.0 }
    ]
  },
  computed: {
    filteredMovies: function() {
      var filter = this.filter.toLowerCase();
      return this.movies.filter(function(movie) {
        return movie.title.toLowerCase().indexOf(filter) !== -1;
      });
    }
  }
});
</script>

在上面的示例中，我们定义了一个名为“filter”的v-model指令，它使用“filter”属性绑定输入字段的值。计算属性“filteredMovies”使用这个属性来生成新的电影列表，该列表只包含与过滤器匹配的电影。这种技术称为响应式的，因为更改输入字段的值将自动更新电影列表。

算法复杂度

请注意，计算属性可能会影响性能，因为它们在每次重新渲染时重新计算其值。因此，当计算属性依赖于大量数据时，请确保优化算法复杂度，以便在可能的情况下使用缓存结果。例如，我们可以将计算数组的长度的属性存储在实例变量中，并在每次更改数据时更新它，以避免重新计算数组长度：

new Vue({
  computed: {
    length: function() {
      return this.data.length;
    }
  },
  watch: {
    data: function() {
      this.length = this.data.length;
    }
  },
  data: {
    data: [/* ... */],
    length: 0
  }
});

总结

Vue计算属性是一种非常强大且灵活的功能，它使我们可以轻松地处理数据过滤、排序和监视。需要注意的是，计算属性可能会影响性能，因此请确保优化算法复杂度，以避免性能问题。