vue之计算属性computed

发表于 | 分类于 ， |

一、计算属性？什么东东？？

不废话，先看代码：

1
2
3
<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

上面双大括号内是可以写表达式的，但是一般会写一些简单的表达式。太复杂的话，可读性比较差，难以维护。
所以，vue提供了计算属性这个东西，即我们所说的computed。

特点：计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算（这点详细作用可以对比文中第三点）

二、怎么用腻？

首先要知道计算属性里用来完成各种复杂逻辑（运算、函数调用等），只要最终返回一个结果即可。computed里有getter和setter，getter用来读取，当手动修改属性值时触发setter。
太晦涩，看代码是王道
讲的啥，我也不明白。。。那我们看例子吧：

1
2
3
4
<div id="example">
   <p>{{ reversedMessage }}</p>
   <p>{{splitMessage}}</p>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var vm = new Vue({
  data: {
    message: 'Hello'
  },
  computed: {
    // 读取和设置
    splitMessage: {
      //getter用于读取
      get: function () {
        return this.message.split('').join('-')
      },
      //setter写入时触发
      //（什么时候会触发？？当我们在代码中改变this.message值得时候，就会触发setter和getter，比如：执行this.message = 'world'时）
      set: function (newValue) {
        this.message = newValue
      }
    }，
    // 仅读取（一般情况下，我们只会用默认的getter方法，所以可以简写如下）
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

在此，只要会用默认getter，问题就不大。

三、对比methods

在表达式中调用methods中的方法，同样可以达到同样的效果：

1
<p>Reversed message: "{{ reversedMessage() }}"</p>

1
2
3
4
5
6
// 在组件中
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

那我们直接用methods就好了呗，vue为何还要创建computed呢？问得好！
因为methods这种方法，值是实时更新的，当页面组件刷新或者执行this.message = 'world'等等，反正只要重新渲染，函数就行重新被执行。
然鹅，computed只有在依赖的实例数据改变时，才会更新（即所说的缓存）。那即使重新渲染，只要this.message的值不发生变化，computed里面getter就不会重新执行。所以当处理大量数据的时候，使用计算属性，而不是方法，这样会提高性能。

四、对比watch

当this.message发生变化时候，触发setter、getter。好似监听、于是我们想到了watch。那他们的区别在哪呢？
例子：

1
2
3
4
5
<div id="myDiv">
    <input type="text" v-model="firstName">
    <input type="text" v-model="lastName">
    <input type="text" v-model="fullName">
</div>

computed：

1
2
3
4
5
6
7
8
9
10
11
12
13
//这里不用再data中声明fullName
new Vue({
    el:"#myDiv",
    data:{
        firstName:"Foo",
        lastName:"Bar",
    },
    computed:{
        fullName:function(){
            return  this.firstName  + " " +this.lastName;
        }
    }
})

watch：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
new Vue({
  el: '#myDiv',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

从上面我们可以总结出：

  • computed是计算属性，是依赖其它的属性计算所得出最后的值。watch是去监听一个值的变化，然后执行相对应的函数。
  • computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时才会重新调用对应的getter来计算。watch在每次监听的值变化时，都会执行回调。其实从这一点来看，都是在依赖的值变化之后，去执行回调。很多功能本来就很多属性都可以用，只不过有更适合的。如果一个值依赖多个属性（多对一），用computed肯定是更加方便的。如果一个值变化后会引起一系列操作，或者一个值变化会引起一系列值的变化（一对多），用watch更加方便一些。
    • watch的回调里面会传入监听属性的新旧值，通过这两个值可以做一些特定的操作。computed通常就是简单的计算。

说了这么多，其实我们可以简单理解为：

1、当我们想的值是实时更新的，我们用methods
2、当我们想要计算后的属性值，依赖于其他数据变化才更新，我们用computed
2、当依赖数据发生变化后，我们还要做其它的一些事情，我们用watch