对于那些开始学习Vue的人来说，对于方法、计算属性和观察者之间的区别有点混淆。
尽管通常可以使用它们中的每一个来完成或多或少相同的事情，但了解每个人在哪里胜过其他人还是很重要的。
在这个快速提示中，我们将了解Vue应用程序的这三个重要方面及其用例。我们将通过使用这三种方法中的每一种构建相同的搜索组件来实现这一点。
Methods
在一个方法中，或多或少是您所期望的——一个对象属性的函数。您可以使用方法对发生在DOM中的事件作出反应，或者可以从组件中的其他位置调用它们，例如，从计算属性或观察者中调用它们。方法用于对公共功能进行分组-例如，处理表单提交，或构建可重用的功能，如发出Ajax请求。
在Vue实例中的methods对象内创建方法：
new Vue({ el: "#app", methods: { handleSubmit() {} } })
当您想在模板中使用它时，您可以这样做：
<div> <button @click="handleSubmit"> Submit </button> </div>
我们使用v-on指令将事件处理程序附加到dom元素，该元素也可以缩写为@符号。
现在，每次单击按钮时都会调用handleSubmit方法。对于要传递方法体中需要的参数的实例，可以执行以下操作：
<div> <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> <h2>Language Search</h2> <div> <input type="text" v-model="input" @keyup="handleSearch" placeholder="Enter language" /> </div> <ul v-for="(item, index) in languages"> <li :key="item">{{ item }}</li> </ul> </div>
如您所见，我们引用的是handlesearch方法，每次用户在搜索字段中键入内容时都会调用该方法。我们需要创建方法和数据：
new Vue({ el: '#app', data() { return { input: '', languages: [] } }, methods: { handleSearch() { this.languages = [ 'JavaScript', 'Ruby', 'Scala', 'Python', 'Java', 'Kotlin', 'Elixir' ].filter(item => item.toLowerCase().includes(this.input.toLowerCase())) } }, created() { this.handleSearch() } })
handlesearch方法使用输入字段的值更新列出的项。需要注意的一点是，在methods对象中，不需要使用this.handlesearch引用该方法（正如在react中必须做的那样）
Computed Properties
虽然上面示例中的搜索可以按预期工作，但更优雅的解决方案是使用计算属性。计算属性对于从现有源组合新数据非常方便，与方法相比，它们的一大优点是缓存了输出。这意味着，如果独立于计算属性的某些内容在页面上发生更改，并且重新呈现UI，则会返回缓存的结果，并且不会重新计算计算计算属性，从而避免了可能代价高昂的操作。
计算属性使我们能够使用我们可用的数据进行即时计算。在本例中，我们有一个需要排序的项目数组。我们希望在用户在输入字段中输入值时进行排序。
我们的模板看起来几乎与前面的迭代相同，除了我们正在传递v-for指令一个计算属性（filteredlist）：
<div> <h2>Language Search</h2> <div> <input type="text" v-model="input" placeholder="Enter language" /> </div> <ul v-for="(item, index) in filteredList"> <li :key="item">{{ item }}</li> </ul> </div>
脚本部分略有不同。我们声明了数据属性中的语言（以前这是一个空数组），而不是方法，我们将逻辑移入了计算属性：
new Vue({ el: "#app", data() { return { input: '', languages: [ "JavaScript", "Ruby", "Scala", "Python", "Java", "Kotlin", "Elixir" ] } }, computed: { filteredList() { return this.languages.filter((item) => { return item.toLowerCase().includes(this.input.toLowerCase()) }) } } })