Vue 计算属性 computed

295 阅读 0 评论 195 点赞

我是靠谱客的博主震动身影，这篇文章主要介绍Vue 计算属性 computed，现在分享给大家，希望可以做个参考。

1、基础例子

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div id="app">
  <h2>总价格：{{totalPrice}}</h2>
</div>
<script>
  const vm = new Vue({
    el: "#app",
    data: {
      message: "hello",
      books: [
        {name: '三国演义', price: 30},
        {name: '红楼梦', price: 40},
        {name: '西游记', price: 50},
        {name: '水浒传', price: 60},
      ],
    },
    computed: {
      // 计算属性的 getter
      totalPrice: function (){
          let result = 0;
          // `this` 指向 vm 实例
          for (let book of this.books){
            result += book.price;
          }
          return result
      }
    }
  })
</script>

结果：总价格：180

这里我们声明了一个计算属性 totalPrice。然后通过for循环计算出书的总价，像这种需要计算的属性，就写在computed中。

属性一般都有get和set两个方法，get获取属性值，set设置属性值，computed中默认就是get属性，我们的vm.totalPrice是依赖于books.price，如果书本的价格发生变化，那么计算属性totalPrice也随之动态变化

2、计算属性缓存 vs 方法

你可能已经注意到我们可以通过在表达式中调用方法来达到同样的效果：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div id="app">
  <h2>总价格：{{getAllPrice()}}</h2>
</div>
<script>
  const vm = new Vue({
    el: "#app",
    data: {
      message: "hello",
      books: [
        {name: '三国演义', price: 30},
        {name: '红楼梦', price: 40},
        {name: '西游记', price: 50},
        {name: '水浒传', price: 60},
      ],
    },
    methods: {
      getAllPrice: function () {
        let result = 0;
        // `this` 指向 vm 实例
        for (let book of this.books){
          result += book.price;
        }
        return result
      }
    },
  })
</script>

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 books 还没有发生改变，多次访问 totalPrice 计算属性会立即返回之前的计算结果，而不必再次执行函数。

所以说计算属性是有缓存的

我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。

3、计算属性的 setter

计算属性默认只有 getter，不过在需要时你也可以提供一个 setter：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
computed: {
  totalPrice: {
    get: function () {
      let result = 0;
      // `this` 指向 vm 实例
      for (let book of this.books){
        result += book.price;
      }
      return result
    },
    set: function (newValue) {
      for (let book of this.books){
        book.price += 10
      }
    }
  }
}