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"><inputtype="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中必须做的那样）

Computed Properties

虽然上面示例中的搜索可以按预期工作，但更优雅的解决方案是使用计算属性。计算属性对于从现有源组合新数据非常方便，与方法相比，它们的一大优点是缓存了输出。这意味着，如果独立于计算属性的某些内容在页面上发生更改，并且重新呈现UI，则会返回缓存的结果，并且不会重新计算计算计算属性，从而避免了可能代价高昂的操作。

计算属性使我们能够使用我们可用的数据进行即时计算。在本例中，我们有一个需要排序的项目数组。我们希望在用户在输入字段中输入值时进行排序。

我们的模板看起来几乎与前面的迭代相同，除了我们正在传递v-for指令一个计算属性（filteredlist）：

<div id="app"><h2>Language Search</h2><div class="form-group"><inputtype="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>

脚本部分略有不同。我们声明了数据属性中的语言（以前这是一个空数组），而不是方法，我们将逻辑移入了计算属性：

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将返回一个数组，其中包含输入到字段中的值。

使用计算属性时，要计算的数据必须可用，否则将导致应用程序出错

computed属性创建了一个新的filteredlist属性，这就是为什么我们可以在模板中引用它。每次依赖项执行此操作时，filteredlist的值都会更改。这里容易改变的依赖项是输入值。

最后，请注意，计算属性允许我们在模板中创建一个变量，该变量是由一个或多个数据属性构建的。一个常见的例子是从这样一个用户的名字和姓氏创建一个全名：

computed: {fullName() {return `${this.firstName} ${this.lastName}`}
}

在模板中，您可以执行全名。每当名字或姓氏的值更改时，全名的值将更改。

Watchers
Watchers对于希望响应已发生的更改（例如，属性或数据属性）执行操作的情况非常有用。正如Vue文档所提到的，当您想要执行异步或昂贵的操作以响应不断变化的数据时，这是最有用的。

在搜索示例中，我们可以返回到方法示例，并为输入数据属性设置一个观察程序。然后我们可以对输入值的任何变化作出反应。

首先，让我们恢复模板以使用语言数据属性：

<div id="app"><h2>Language Search</h2><div class="form-group"><inputtype="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}}
})

这里，我将观察者设置为一个对象（而不是一个函数）。这是为了我可以指定一个即时属性，它将导致观察程序在组件被装载后立即触发。这会产生填充列表的效果。然后运行的函数在handler属性中。

总结：
正如他们所说，拥有强大的力量，责任重大。Vue为您提供了构建伟大应用程序所需的超级能力。知道何时使用它们是构建用户喜爱的内容的关键。方法、计算属性和观察者是您可用的超级能力的一部分。往前走，一定要好好利用它们！

原文地址：https://www.sitepoint.com/the-difference-between-computed-properties-methods-and-watchers-in-vue/添加链接描述

Vue中computed、methods和watch之间的区别相关推荐

vue中computed、metfods、watch的区别
一.computed和methods 我们可以将同一函数定义为一个 method 或者一个计算属性.对于最终的结果,两种方式确实是相同的. 不同的是computed计算属性是基于它们的依赖进行缓存的. ...
vue方法调用失败后多次调用_浅析Vue中 computed / watch / methods的区别
思考:请说下Vue中computed 和 watch 的区别( 面试题 ) 构造选项 computed / watch / methods computed ● computed 起初构想在Vue的 ...
vue中computed（计算属性）和watch在实现父子组件props同步时的实际区分
vue中computed和watch的对比是一个很有意思的话题. 看过官网教程以后,我们往往更倾向多使用computed.computed优点很多,却在某些时候不太适用. 今天我们就稍微讨论一下,当我 ...
Vue中computed分析
Vue中computed分析在Vue中computed是计算属性,其会根据所依赖的数据动态显示新的计算结果,虽然使用{{}}模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的,在模板中放入太 ...
深究vue中computed顺序、watch顺序、响应次数
文章目录前言深究步骤 1.代码 2.输出结果 3.分析过程总结前言深究vue中computed顺序.watch顺序.响应次数深究步骤 1.代码 <template><di ...
VUE中computed 、created 、mounted 的先后顺序
VUE中computed .created .mounted 的先后顺序 1.computed .created .mounted 的先后顺序 created => computed => ...
vue中computed的详细讲解
vue中computed的详细讲解 1.定义 2.用法 3.computed的响应式依赖(缓存) 4.应用场景 1.定义 computed是vue的计算属性,是根据依赖关系进行缓存的计算,只有在它的相 ...
C＃中的结构和类之间的区别
C#类和结构 (C# class and structure) In C# and other programming languages, structure and classes are use ...
Spring MVC和REST中@RestController和@Controller注释之间的区别
Spring MVC中的@RestController注释不过是@Controller和@ResponseBody注释的组合. 它已添加到Spring 4.0中,以简化在Spring框架中RESTfu ...
SQL 中的=，in,like之间的区别
SQL中的=,in,like之间的区别: 三者都可以用来进行数据匹配 .但三者并不相同. 等号是用来查找与单个值匹配的所有数据: IN 是用来查找与多个值匹配的所有数据: 而 LIKE用来查找与一个 ...

Vue中computed、methods和watch之间的区别

Vue中computed、methods和watch之间的区别相关推荐

最新文章

热门文章