使用计算属性来描述依赖响应式状态的复杂逻辑,在template中使用计算属性,提高可读性
返回值为一个计算属性 ref, 可以通过 .value访问计算结果,在模版中自动解包
Vue 的计算属性会自动追踪响应式依赖, 它会检测到 计算属性publishedBooksMessage的 依赖的变化，所以当计算属性的依赖author.books 改变时，任何依赖于 的绑定都会同时更新。
// 一个计算属性 ref
const publishedBooksMessage = computed(() => {
return author.books.length > 0 ? 'Yes' : 'No'
})
计算属性与方法的区别:
计算属性值会基于其响应式依赖被缓存, 一个计算属性仅会在其响应式依赖更新时才重新计算。
相比之下，方法调用总是会在重渲染发生时再次执行函数。
可写计算属性:
计算属性默认是只读的。当你尝试修改一个计算属性时，你会收到一个运行时警告。
你可以通过同时提供 getter 和 setter 来创建：
const fullName = computed({
get() { //getter
return firstName.value + ' ' + lastName.value
},
set(newValue) { //setter
// 注意：我们这里使用的是解构赋值语法
[firstName.value, lastName.value] = newValue.split(' ')
}
})
现在当你再运行 fullName.value = 'John Doe' 时，setter 会被调用而 firstName 和 lastName 会随之更新。
最佳实践
getter不应有副作用,不要改变其他状态、在 getter 中做异步请求或者更改 DOM！一个计算属性的声明中描述的是如何根据其他值派生一个值。因此 getter 的职责应该仅为计算和返回该值。
避免直接修改计算属性值, 从计算属性返回的值是派生状态。可以把它看作是一个“临时快照”，每当源状态发生变化时，就会创建一个新的快照。更改快照是没有意义的，因此计算属性的返回值应该被视为只读的，并且永远不应该被更改——应该更新它所依赖的源状态以触发新的计算。
