1. 什么是计算属性

1.1 从一个引例说起

如果没有计算属性，我们返回的一些数据可能并不适合直接使用与模板中，而需要进行一些适当的转换，使之成为适合展示的形式。例如：

<template>
  <p>年： {{ datetime.split(' ')[0].split('/')[0] }}</p>
  <p>月： {{ datetime.split(' ')[0].split('/')[1] }}</p>
  <p>日： {{ datetime.split(' ')[0].split('/')[2] }}</p>
</template>

<script setup lang="ts">
import { ref } from "vue";
const datetime=ref('2022/06/01 17:30:00');
</script>

这里假定 datetime 是一个可能随时改变的变量。可以看到，我们在模板语法里面写得比较“长”。实际上就是在模板中写了比较长得表达式，而表达式得结果是一个我们需要展示的值。

我们希望模板更为简洁，而不是写过长的表达式。计算属性就能够解决这个问题。

1.2 计算属性的概念

计算属性通过方法来描述一个获取一个值，这个值就像一个属性一样，只不过它是通过方法计算得来的。有了计算属性后：

<template>
  <p>年： {{ year }}</p>
  <p>月： {{ month }}</p>
  <p>日： {{ day }}</p>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';

const datetime = ref('2022/06/01 17:30:00');
const _ = datetime.value.split(' ')[0].split('/')

const year = computed(()=>{
  return _[0]
})

const month = computed(()=>{
  return _[1]
})

const day = computed(()=>{
  return _[2]
})

</script>

在这个例子中，一旦 datetime 改变后，计算属性 year、month、day 将获得新的值。

2. 计算属性的用法

2.1 选项式API下的计算属性使用

2.1.1 计算属性的完整写法

计算属性实际上由 getter 和 setter 两部分组成，它们分别用来获取和设置计算属性的值。例如：

<template>
  <input v-model="sn" type="input" placeholder="姓" name="s" /><br>
  <input v-model="fn" placeholder="名" type="input" name="f" /><br>
  <input v-model="name" placeholder="姓-名" type="input" name="n" />
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  data() {
    return {
      fn: ref(''),
      sn: ref(''),
    }
  },
  computed:{
    name:{
      get(){
        return this.sn + '-' + this.fn;
      },
      set(_name:string){
        [this.sn, this.fn] = _name.split('-');
      }
    }
  }
})
</script>

2.1.2 计算属性的简写法

2.2 组合式API下的计算属性使用

在 1.2 计算属性的概念的案例中，我们使用的就是组合式 API。相比与选项式 API，使用组合式 API 时，需要导入computed函数：

import { computed } from "vue";

完整的组合式 API 同样需要指定 getter 和 setter。例如：

<template>
  <input v-model="sn" type="input" placeholder="姓" name="s" /><br>
  <input v-model="fn" placeholder="名" type="input" name="f" /><br>
  <input v-model="name" placeholder="姓-名" type="input" name="n" />
</template>

<script setup lang="ts">
import { computed, ref } from "vue";

const sn = ref('');
const fn = ref('');

const name = computed({
  get() {
    return sn.value + '-' + fn.value
  },
  set(_name:string){
    [sn.value, fn.value] = _name.split('-')
  }
  
})
</script>

2.3 触发重新计算的条件

在计算属性的使用中，一个很重要的问题就是，什么情况下将会触发计算属性值的改变。换句话说，也就是什么情况下计算属性将重新计算。对我们来说最终计算属性的值是通过计算属性的 getter 获取的，问题就转换为：getter 什么时候调用。

vue 在以下情况下会重新调用 getter：

初次读取该计算属性时；
该计算属性所依赖的数据发生改变时。

在上面这两种情况都会触发 getter 的调用，进一步实现数据的更新。

3. 计算属性与方法（函数）的比较

可能你已经看出来，从效果上看，计算属性实际上就是通过函数计算得到一个属性值，这使用函数（方法）完全可以实现同样的效果。例如使用计算属性：

<template>
  <p>{{ now }}</p>
</template>

<script setup lang="ts">
import { computed } from 'vue';

const now = computed(()=>{
  return Date.now()
})
</script>

使用方法（函数）：

<template>
  <p>{{ now() }}</p>
</template>

<script setup lang="ts">

const now = ()=>{
  return Date.now()
}
</script>

效果是一样的。既然这样那么我们为什么还需要使用计算属性呢——换句话说，计算属性和普通函数有什么不同呢？

在 Vue 中，若我们将 同样的函数 定义为一个方法而不是 计算属性 ，两种方式在结果上确实是完全相同的。
不同之处在于 计算属性值会基于其响应式依赖被缓存。一个 计算属性 仅会在其 响应式依赖 更新时才会进行 重新计算。

再举一个例子：

<template>
  <input v-model="str" />
  <p>{{ msg }}</p>
  <p>{{ msg }}</p>
  <p>{{ msg }}</p>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';

const str = ref("Some words.")
const msg = computed(()=>{
  return str
})
</script>

在这个例子中，虽然有三次使用了'<p>{{ msg }}</p>'，但是仅仅计算了一次，并将计算属性值缓存。换句话说，这三个值共用的是同一次计算，并没有计算三次。

4. 计算属性与监听器的比较

经常同一个功能使用计算属性（computed）和监听器（watch）都可以实现。比如在 2.2 小节中的案例，是使用 computed 实现的：

<template>
  <input v-model="sn" type="input" placeholder="姓" name="s" /><br>
  <input v-model="fn" placeholder="名" type="input" name="f" /><br>
  <input v-model="name" placeholder="姓-名" type="input" name="n" />
</template>

<script setup lang="ts">
import { computed, ref } from "vue";

const sn = ref('');
const fn = ref('');

const name = computed({
  get() {
    return sn.value + '-' + fn.value
  },
  set(_name:string){
    [sn.value, fn.value] = _name.split('-')
  }
  
})
</script>

我们也可以改成使用 watch 实现：

<template>
  <input v-model="sn" type="input" placeholder="姓" name="s" /><br>
  <input v-model="fn" placeholder="名" type="input" name="f" /><br>
  <input v-model="fullname" placeholder="姓-名" type="input" name="n" />
</template>

<script setup lang="ts">
import { watch, ref } from "vue";

const sn = ref('');
const fn = ref('');
const fullname = ref('');

watch(fullname, (newValue, oldValue)=>{
  [sn.value, fn.value] = newValue.split('-')
})

watch([sn, fn], ([new_sn, new_fn])=>{
  fullname.value = new_sn + '-' + new_fn
})
</script>