Vue3 composition API: 使用 computed 函数替换 computed properties

选项式 API 中的计算属性：

模板中如果要输出一些数据，应优先考虑使用 computed 属性。

如果使用 methods, 那么，页面上发生任何变化，methods 里的方法都无条件执行一遍，因为 Vue 不知道什么发生了变化，所以为了保险起见，methods 里的方法全部执行。

computed: {
	// 应该像数据属性一样命名
	// 虽然本质上 fullname 仍是一个方法
	fullname() {
	}
}

使用计算属性要像使用数据属性或者变量一样，不能加括号，因为不是调用，只是指向。例如下面的 fullname 后面不能加括号，不能写成 fullname() 的形式。

<template>
	<p> My name: {{ fullname }} <p>
</template>

计算属性本质上类似于方法，但是有一个重要的区别：Vue 明白它们的依赖，所以仅仅当某个依赖变化时才会重新计算。

所以在输出数据时，和使用 methods 相比，使用 computed 属性在性能上更有优势， 是更好的做法。

使用 methods 的场合：

1. 如果你确定，当页面上发生任何改变时，某个值都需要重新计算一遍，那么此时使用 methods。(多数情况并非如此)
2. events 总是与 methods 绑定。

组合式API： computed 属性替换成 computed 函数

1. 首先需要 import computed 函数：

import { ref, computed } from 'vue';

2. 然后 computed 函数的参数是一个函数 ：

const uName = computed(function () {
      return firstName.value + ' ' + lastName.value;
    });

setup() 函数中，可以读取 uName.value, 但是不能修改。
计算属性实质上也是一个ref，但是是一个只读的 ref。

代码举例：

<template>
  <section class="container">
    <h2>{{ userName }}</h2>
    <h3>{{ age }}</h3>
    <button @click="setAge">Change Age</button>
    <div>
      <input type="text" placeholder="First Name" @input="setFirstName" />
      <input type="text" placeholder="Last Name" @input="setLastName" />
    </div>
  </section>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const firstName = ref('');
    const lastName = ref('');
    const uAge = ref(31);
    const uName = computed(function () {
      return firstName.value + ' ' + lastName.value;
    });

    const setNewAge = () => (uAge.value = 32);

    function setFirstName(event) {
      firstName.value = event.target.value;
    }
    function setLastName(event) {
      lastName.value = event.target.value;
    }
    return {
      userName: uName,
      age: uAge,
      setAge: setNewAge,
      setFirstName,
      setLastName,
    };
};
</script>