Vue中的方法与计算

Vue中的计算值和方法有很大不同，在大多数情况下绝对不能互换。

计算财产

计算值更合适的名称是计算属性。实际上，当实例化Vue时，已计算的属性会使用getter（有时是setter）转换为Vue的属性。基本上，您可以将计算值视为派生值，只要用于计算它的基础值之一被更新，它就会自动更新。您不调用计算的，也不接受任何参数。您引用的是计算属性，就像引用数据属性一样。这是文档中的经典示例：

computed: {
  // a computed getter
  reversedMessage: function () {
    // `this` points to the vm instance
    return this.message.split('').reverse().join('')
  }
}

在DOM中这样引用：

<p>Computed reversed message: "{{ reversedMessage }}"</p>
计算值对于处理Vue上存在的数据非常有价值。每当您要过滤或转换数据时，通常都将为此目的使用计算值。

data:{
    names: ["Bob", "Billy", "Mary", "Jane"]
},
computed:{
    startsWithB(){
        return this.names.filter(n => n.startsWith("B"))
    }
}
<p v-for="name in startsWithB">{{name}}</p>

计算值也将被缓存，以避免重复计算在未更改时不需要重新计算的值（例如，可能不在循环中）。

方法

方法只是绑定到Vue实例的函数。仅当您显式调用它时，才会对其进行评估。像所有javascript函数一样，它接受参数，并且每次调用时都会重新评估。在任何情况下，函数都有用的方法是有用的。

data:{
    names: ["Bob", "Billy", "Mary", "Jane"]
},
computed:{
    startsWithB(){
        return this.startsWithChar("B")
    },
    startsWithM(){
        return this.startsWithChar("M")
    }
},
methods:{
    startsWithChar(whichChar){
        return this.names.filter(n => n.startsWith(whichCharacter))
    }
}

Vue的文档非常好，并且易于访问。我推荐它。