vue 计算属性

computed与methods的区别

1. 计算属性computed，内置缓存，当计算依赖的变量没有发生改变的时候，该计算属性不会再重新计算，依旧用上次计算的结果，以此提高性能;如果计算属性依赖变量有改变，才会重新计算

<div id="app">
    {{fullName}}
    {{age}}
  </div>

computed: {
    fullName: function() {
      console.log("计算了一次"); // 控制台vm.age = 17 更改age的值，并不会重新打印 "计算了一次"
      return this.firstName + " " + this.lastName;
    }
}

2. 方法methods，同样可以达到计算的效果，但是没有缓存机制，每次都会重新计算

<div id="app">
    {{fullName()}}
    {{age}}
  </div>

 methods: {
    fullName: function () {
      console.log("计算了一次");
      return this.firstName + " " + this.lastName;
    }
}