v-for 和 v-if

计算属性是减少复杂逻辑的一个很好的方式，比如，在条件表达式很长的时候就很可以用计算属性，简化成一个变量，可以大大的提高可读性，也避免给后面维护的人留坑。

<div v-for=’car in cars’ v-if=’car.country =="Germany"' >

可以使用v-for来循环浏览列表，有些人会像上面那样使用 v-if 来做条件或过滤。这看起来不错，但是，Vue的编译器优先考虑 v-for 而不是 v-if，所以最后的结果可能不是想要的，列表（想象它有100万个）将被每次循环，这样一点都不高效，可以使用计算属性改善这一问题。

<div v-for='car in countryFilter'>
//....
computed: {
  countryFilter: () => {
    return this.cars.filter(function (car) {
      return car.country =="Germany"
    })
  }
}

这种循环效率更高，计算的属性也只被执行一次，只有依赖的变量变化时才会再次执行。最后，它把逻辑从模板部分分离出来，这样代码就更干净和可读。