对于那些刚开始学习vue的人来说，方法，计算属性和观察者之间的差异让人有些困惑。尽管经常可以使用它们中的每一个来完成或多或少相同的事情，但是知道它们在哪些方面优于其他的是很重要的。
在这个快速技巧中，我们将研究vue应用程序的这三个重要方面及其用例。我们将使用这三种方法中的每一种构建相同的搜索组件。
方法方法或多或少是你所期望的--一个函数，它是一个对象的属性。 你可以使用方法对dom中发生的事件做出反应，也可以从组件中的其他位置（例如，在计算属性或观察程序中）调用它们。 方法用于对常用功能进行分组--例如，用于处理表单提交或构建可重用功能，例如发出ajax请求。
你可以在methods对象内部的vue实例中创建方法：
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"。
现在，让我们看一个使用方法筛选数组中的数据列表的示例。
在演示中，我们要呈现数据列表和搜索框。每当用户在搜索框中输入值时，呈现的数据都会更改。模板将如下所示：
<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方法，每次用户在搜索字段中键入内容时都会调用该方法。我们需要创建方法和数据：
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中必须这样做）。
计算属性尽管以上示例中的搜索按预期工作，但更优雅的解决方案是使用计算属性。 计算属性对于从现有资源中组合新数据非常方便，并且与方法相比，它们的一大优点是可以缓存其输出。 这意味着，如果页面上与计算属性无关的某些内容发生更改，并且ui会重新呈现，则将返回缓存的结果，并且将不会重新计算计算属性，从而为我们节省了潜在的昂贵操作。
计算属性使我们能够使用可用的数据即时进行计算。 在这种情况下，我们有一系列需要排序的项目。 我们想要在用户在输入字段中输入值时进行排序。
我们的模板看起来与之前的迭代几乎相同，除了我们向v-for指令传递了一个计算属性（filteredlist）：
<div id="app"> <h2>language search</h2> <div class="form-group"> <input type="text" v-model="input" placeholder="enter language" class="form-control" /> </div> <ul v-for="(item, index) in filteredlist" class="list-group"> <li class="list-group-item" :key="item">{{ item }}</li> </ul></div>
脚本部分略有不同。我们在data属性中声明语言（以前这是一个空数组），而不是将方法转移到计算属性中的方法：
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()) }) } }})
filteredlist 计算的属性将包含一个包含输入字段值的项目数组。 在第一次渲染时（当输入字段为空时），将渲染整个数组。 当用户在字段中输入值时，filteredlist将返回一个数组，其中包含在字段中输入的值。
当使用计算属性时，要计算的数据必须可用，否则将导致应用程序错误。
计算属性创建了一个新的filteredlist属性，这就是为什么我们可以在模板中引用它的原因。每次依赖项发生变化时，filteredlist的值就会发生变化。这里容易改变的依赖关系是input的值。
最后，请注意，计算属性使我们可以创建一个变量，以在由一个或多个数据属性构建的模板中使用。一个常见的示例是fullname从用户的名字和姓氏创建一个，如下所示：
computed: { fullname() { return `${this.firstname} ${this.lastname}` }}
在模板中，您可以执行{{fullname}}。每当第一个或最后一个名称的值发生变化时，fullname的值就会发生变化。
观察者当您希望对发生的更改(例如，对一个道具或数据属性)执行一个操作时，观察者非常有用。正如vue文档所述，当您希望执行异步或昂贵的操作来响应数据更改时，这是最有用的。
在我们的搜索示例中，我们可以返回到方法示例，并为input data属性设置一个监视程序。然后，我们可以对input值的任何变化做出反应。
首先，让我们还原模板以利用languages data属性：
<div id="app"> <h2>language search</h2> <div class="form-group"> <input type="text" v-model="input" 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>
然后我们的vue实例将如下所示：
new vue({ el: "#app", data() { return { input: '', languages: [] } }, watch: { input: { handler() { this.languages = [ 'javascript', 'ruby', 'scala', 'python', 'java', 'kotlin', 'elixir' ].filter(item => item.tolowercase().includes(this.input.tolowercase())) }, immediate: true } }})
在这里，我已经将观察者作为对象（而不是函数）。这样，我可以指定一个immediate属性，该属性将导致观察者在安装组件后立即触发。这具有填充列表的效果。然后，运行的函数在该handler属性中。
结论正如他们所说，强大的力量伴随着巨大的责任。vue为您提供了构建出色应用程序所需的超能力。知道何时使用它们是建立用户喜爱的关键。方法、计算属性和观察者是您可以使用的超能力的一部分。展望未来，一定要好好利用它们!
相关推荐：
2020年前端vue面试题大汇总（附答案）
vue教程推荐：2020最新的5个vue.js视频教程精选
更多编程相关知识，请访问：编程入门！！
以上就是vue中computed属性、methods和watch之间的差异的详细内容。