filteredList计算属性将包含包含输入字段值的项数组。在第一次渲染时（当输入字段为空时），将渲染整个数组。当用户在字段中输入值时，filteredList将返回一个数组，其中包含输入到字段中的值。
使用计算属性时，要计算的数据必须可用，否则将导致应用程序出错
computed属性创建了一个新的filteredlist属性，这就是为什么我们可以在模板中引用它。每次依赖项执行此操作时，filteredlist的值都会更改。这里容易改变的依赖项是输入值。
最后，请注意，计算属性允许我们在模板中创建一个变量，该变量是由一个或多个数据属性构建的。一个常见的例子是从这样一个用户的名字和姓氏创建一个全名：
computed: { fullName() { return `${this.firstName} ${this.lastName}` } }
在模板中，您可以执行全名。每当名字或姓氏的值更改时，全名的值将更改。
Watchers
Watchers对于希望响应已发生的更改（例如，属性或数据属性）执行操作的情况非常有用。正如Vue文档所提到的，当您想要执行异步或昂贵的操作以响应不断变化的数据时，这是最有用的。
在搜索示例中，我们可以返回到方法示例，并为输入数据属性设置一个观察程序。然后我们可以对输入值的任何变化作出反应。
首先，让我们恢复模板以使用语言数据属性：
<div> <h2>Language Search</h2> <div> <input type="text" v-model="input" placeholder="Enter language" /> </div> <ul v-for="(item, index) in languages"> <li :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 } } })
这里，我将观察者设置为一个对象（而不是一个函数）。这是为了我可以指定一个即时属性，它将导致观察程序在组件被装载后立即触发。这会产生填充列表的效果。然后运行的函数在handler属性中。
总结：
正如他们所说，拥有强大的力量，责任重大。Vue为您提供了构建伟大应用程序所需的超级能力。知道何时使用它们是构建用户喜爱的内容的关键。方法、计算属性和观察者是您可用的超级能力的一部分。往前走，一定要好好利用它们！
原文地址：https://www.sitepoint.com/the-difference-between-computed-properties-methods-and-watchers-in-vue/添加链接描述
好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对脚本之家的支持。
您可能感兴趣的文章: