计算属性

为什么要是用计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。

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

在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要将变量 message 的值进行翻转。当你想要在模板中，多次使用此种方式翻转字符串的时候，就会变的更加难以处理。

所以，对于任何复杂逻辑，你都应当使用计算属性。

什么是计算属性

计算属性，就是用来声明式的描述一个值依赖了其它的值。

当你在模板里把数据绑定到一个计算属性上时，Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM。

计算属性是有一定的缓存策略的，只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 依赖的值 还没有发生改变，多次访问 对应的计算属性，则计算属性会立即返回之前的计算结果，而不必再次执行函数。

实例演示

<template>
  <div>
    <h1>计算属性演示</h1>
    {{ fullName }}
    <br>
    firstName: <input type="text" v-model="firstName">
    <br>
    lastName: <input type="text" v-model="lastName">
    <br>
    <button @click="testButton">测试</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      firstName: 'yulei',
      lastName: 'lan'
    }
  },
  computed: {
    fullName () {
      console.log('计算了一次')
      return this.lastName + ' ' + this.firstName
    }
  },
  methods: {
    testButton () {
      this.lastName = 'lan'
    }
  }
}
</script>

setter

计算属性默认只有 getter，不过在需要时你也可以提供一个 setter，也就是设置直接设置计算属性的值：

实例演示

<template>
  <div>
    <h1>计算属性演示</h1>
    {{ fullName }}
    <br>
    <button @click="testButton">测试</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      firstName: 'yulei',
      lastName: 'lan'
    }
  },
  computed: {
    fullName: {
      get () {
        console.log('计算了一次')
        return this.lastName + ' ' + this.firstName
      },
      set (value) {
        console.log(value)
        var name = value.split(' ')
        this.lastName = name[0]
        this.firstName = name[1]
      }
    }
  },
  methods: {
    testButton () {
      this.fullName = 'lan lan'
    }
  }
}
</script>

方法

我们定义一个方法，通过插值表达式去调用这个方法，那么则不管数据是否有变动则每次都会执行。

如果你不希望有缓存的情况出现的时候，可以使用方法代替计算属性。

<template>
  <div>
    {{ fullName() }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'yulei',
      lastName: 'lan'
    }
  },
  methods: {
    fullName () {
      return this.lastName + ' ' + this.firstName
    }
  }
}
</script>

侦听器

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

同时侦听器和计算属性相同的是，也是具有一定的缓存特性。

实例演示：

<template>
  <div>
    {{ fullName }}
    <br>
    firstName: <input type="text" v-model="firstName">
    <br>
    lastName: <input type="text" v-model="lastName">
    <br>
    <button @click="testButton">测试 (lan)</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      firstName: 'yulei',
      lastName: 'lan',
      fullName: 'lanyulei'
    }
  },
  watch: {
    lastName () {
      console.log('监听到 lastName 有变化')
      this.fullName = this.lastName + ' ' + this.firstName
    },
    firstName () {
      console.log('监听到 firstName 有变化')
      this.fullName = this.lastName + ' ' + this.firstName
    }
  },
  methods: {
    testButton () {
      this.lastName = 'lan'
    }
  }
}
</script>