计算属性

计算属性常用于简化模板逻辑

常规：

<span>{{ author.books.length > 0 ? 'Yes' : 'No' }}</span>

使用计算属性简化模板：

<span>{{ publishedBooksMessage }}</span>

let publishedBooksMessage= computed(()=>{
   return author.books.length > 0 ? 'Yes' : 'No'
});

计算属性 vs 普通方法

若上述示例中的 publishedBooksMessage是一个普通方法，也能实现简化模板的目的，与计算属性的效果完全相同；区别在于计算属性能够缓存计算结果，而普通方法会在每次重新渲染时再次执行。

注：计算属性仅会在响应式依赖更新时才会重新计算，如下计算属性永远不会更新，因为计算属性内没有响应式依赖：

let now= computed(()=>{
   return Date.now();
});

最佳实践

计算属性默认是只读的，如果要修改计算属性，可通过同时提供 getter 和 setter 来实现，详见官网；

计算函数不应有副作用：不要在计算函数中做异步请求或更改 DOM，计算函数的职责是计算和返回值；

避免直接修改计算属性值：从计算属性返回的值是派生状态，是一个“临时快照”，每当源状态发生变化时，就会创建一个新的快照，更改快照是没有意义的，因此计算属性的返回值应该被视为只读的，并且永远不应该被更改——应该更新它所依赖的源状态以触发新的计算。