计算属性computed vs 方法methods vs 侦听

Vue.js

计算属性computed vs 方法methods

computed是可以缓存的，基于它的依赖进行缓存，只有在相关依赖发生改变时它才会重新求值。

computed:{
  fullName: function(){
    return this.firstName + this.lastName
  }
},//fullName值被缓存，如果firstName或者lastName发生改变，依赖于它们的fullName才会更新。如果firstName和lastName都没有改变，访问fullName会直接返回之前的计算结果

methods:{
  fullName: function(){
    return this.firstName + this.lastName
  }
},//没有缓存，每次访问fullName都会执行函数，重新计算

计算属性computed vs 侦听属性watch
一个数据属性在它所依赖的属性发生变化时，也要发生变化，这种情况下，我们最好使用计算属性。
watch函数适用于，当数据发生变化时，执行异步操作或较大开销操作的情况。

computed:{
  fullName: function(){
    return this.firstName + this.lastName
  }
},//computed可以直接监听fullName的值。适用于多对1的情况

watch: {
  firstName: function (val) {
    this.fullName = val + ' ' + this.lastName
  },
  lastName: function (val) {
    this.fullName = this.firstName + ' ' + val
  }
},//缺点代码重复，需要监听firstName和lastName两个值。