Vue中computed、methods与watch的区别总结

前言

对于那些开始学习Vue的人来说，对于方法、计算属性和观察者之间的区别有点混淆。

尽管通常可以使用它们中的每一个来完成或多或少相同的事情，但了解每个人在哪里胜过其他人还是很重要的。

在这个快速提示中，我们将了解Vue应用程序的这三个重要方面及其用例。我们将通过使用这三种方法中的每一种构建相同的搜索组件来实现这一点。

Methods

在一个方法中，或多或少是您所期望的——一个对象属性的函数。您可以使用方法对发生在DOM中的事件作出反应，或者可以从组件中的其他位置调用它们，例如，从计算属性或观察者中调用它们。方法用于对公共功能进行分组-例如，处理表单提交，或构建可重用的功能，如发出Ajax请求。

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

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

当您想在模板中使用它时，您可以这样做：

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

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

现在，每次单击按钮时都会调用handleSubmit方法。对于要传递方法体中需要的参数的实例，可以执行以下操作：

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

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

但是，当我们使用一个指令来附加事件时，我们可以使用一个修饰符来更优雅地实现相同的事情： @click.stop=“handleSubmit” 。

现在我们来看一个使用方法过滤数组中数据列表的示例。

In the demo, we want to render a list of data and a search box. The data rendered changes whenever a user enters a value in the search box. The template will look like this:

在演示中，我们要呈现一个数据列表和一个搜索框。每当用户在搜索框中输入值时，所呈现的数据都会发生更改。模板将如下所示：

<div id="app"> <h2>Language Search</h2> <div class="form-group"> <input  type="text"  v-model="input"  @keyup="handleSearch"  placeholder="Enter language"  class="form-control" /> </div> <ul v-for="(item, index) in languages" class="list-group"> <li class="list-group-item" :key="item">{{ item }}</li> </ul></div>

如您所见，我们引用的是handlesearch方法，每次用户在搜索字段中键入内容时都会调用该方法。我们需要创建方法和数据：