Vue中计算属性（computed）、方法（methods）和侦听属性（watchers）的区别

目录

方法（methods）

计算属性（Computed）

侦听属性（watchers）

结论

---

对于刚开始学习Vue的开发者来说，十分容易混淆Vue中计算属性、方法和侦听属性，希望通过本文的介绍，您能了解并分辨这三者的区别。

熟悉 Vue 的同学都知道：在Vue框架中，计算属性（computed）、方法（methods）和侦听属性（watchers）充当着非常重要的角色，它们既可以用来实现相同的功能，彼此之间又存在一些不同之处。三者都有适合自己的场景，我们要想在合适的场景下灵活运用它们，必须对它们有全面的了解。

方法（methods）

正如他的名字一样，它们是挂载在对象上的函数，通常是Vue实例本身或Vue组件。

您可以使用methods对DOM中发生的事件做出反应，也可以从组件中的其他位置调用它们，例如，从计算属性（computed）或侦听（watchers）中调用。

Methods 主要用于对常用功能进行分组，包括处理表单提交，以及构建可重用功能时，例如发出Ajax请求。

在methods对象内部的Vue实例中创建方法如下：

new Vue({
 el: "#app",
 methods: {
 handleSubmit() {}
 }
})

当需要在模板中使用methods时：

<div id="app">
 <button @click="handleSubmit">
 Submit
 </button>
</div>

我们使用v-on指令将事件处理程序附加到我们的DOM元素，DOM元素也可以缩写为@符号。

以代码中的handleSubmit事件为例，每次单击按钮时都会调用该方法。

对于要传递方法体中需要的参数化的实例，可以执行以下操作：

<div id="app">
 <button @click="handleSubmit(event)">
 Submit
 </button>
</div>

这里我们传递一个事件对象，例如，它允许我们在表单提交的情况下阻止浏览器的默认操作。

但是，当我们使用指令来附加事件时，我们可以使用