Vue.js 中 Methods 和 Computed 的区别与使用场景

Methods 和 computed 是 Vue.js 中用于定义计算属性的两种方式。\n\nMethods 是一个对象，其中包含了一些方法，这些方法可以在模板中通过调用来执行。每当模板重新渲染时，方法会被重新调用。Methods 适用于需要执行一些逻辑操作或触发一些事件的场景。\n\n例如：\n\njavascript\nmethods: {\n calculateSum: function() {\n return this.num1 + this.num2;\n }\n}\n\n\nhtml\n<div>{{ calculateSum() }}</div>\n\n\nComputed 是一个对象，其中包含了一些计算属性的定义。计算属性是根据已有的数据计算得到的属性，它的值会被缓存起来，只有当依赖的数据发生变化时，才会重新计算。Computed 适用于需要根据多个数据计算得到一个新值的场景。\n\n例如：\n\njavascript\ncomputed: {\nsum: function() {\n return this.num1 + this.num2;\n }\n}\n\n\nhtml\n<div>{{ sum }}</div>\n\n\n总结起来，Methods 适用于需要执行一些逻辑操作或触发事件的场景，而 Computed 适用于根据已有的数据计算得到一个新值的场景，并且计算的结果会被缓存起来。