computed属性支持在template中直接使用，不需要像methods那样调用函数

假设我们有以下数据：

data() {
  return {
    list: [1, 2, 3, 4, 5],
  }
}

我们希望在模板中显示这个列表的长度，可以在computed属性中定义一个计算属性listLength，如下所示：

computed: {
  listLength() {
    return this.list.length
  }
}

然后我们就可以在模板中直接使用这个计算属性了，而不需要像methods那样调用函数：

<template>
  <div>
    列表长度：{{ listLength }}
  </div>
</template>

在这个例子中，computed属性listLength会根据依赖属性list的长度进行计算，并自动更新其值。我们直接在模板中使用listLength，模板会自动根据计算属性的值进行渲染，这样就可以非常方便地计算和显示列表的长度，避免了在methods中写重复的代码。