vue中计算属性computed——基础必懂

计算属性是什么？

他是把一个值修改成别的值。{{ message.split(’’).reverse().join(’’) }}，类似于这种场景。

怎么使用?

记得fullName是不用去data里面去重复声明的。稍微复杂的操作会在计算属性里面处理。比如对一个大的数据块进行去空值并且穿插一些新东西。

data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }

同样目的，methods也能实现啊

methods里面是每次都会触发的。也就是说无论数值有无发生变化都会跑一趟，就会有浪费。
官方文档有句话是：计算属性是基于它们的响应式依赖进行缓存的（加粗的）

通俗地讲：
响应式：就是一个值从被声明到获取，可以按照你设定的规则触发一系列其他的操作 
依赖：模板view层东西，最后会被编译成一个render函数，render会依赖（关联）于Model中的属性。
因为你依赖我就知道哪些属性有改动，又因为是响应式，所以能够知道你变了么？爱会消失？？？

这就导致了计算属性的优势。待会会在下面的get、set中介绍响应式缓存
一句话就是：没变化不计算，有变化才计算

计算属性VS监听属性

同样实现上面那个例子，监听属性劣势：需要在data里声明三个值（第三个为fullName）
（看懂小tip:两个监听是为了保证A/B变化时候都能监听到）
监听A器1：fullname=把新A值+B值
监听B器2：fullname=A值+新B值

而计算属性：声明两个值
计算器：fullname=A+B
简单很多了

getter、setter

因为这是响应式，所以提供了get、set的配置。计算属性默认只有get。
第一眼你可能想不到set干嘛用的

这么说。你已经计算了新的值fullname出来。某个地方需要直接修改fullname=1呢?这是不是set，那么修改前会触发计算属性中的setter。

fullName: {
      get: function () {
        return this.a + 1
      },
      set: function (v) {
        this.a = v - 1
      }
    }