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方法,每次用户在搜索字段中键入内容时都会调用该方法。我们需要创建方法和数据:

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">
 <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>

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

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">
 <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
 }
 }
})

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

总结:

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

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

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对我们的支持。

(0)

相关推荐

  • Vue.js计算属性computed与watch(5)

    在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需要多于一个表达式的逻辑,应当使用**计算属性**. Vue实例的computed的属性 <div class="test"> <p>原始的信息{{message}}</p> <p>计算后的信息{{ComputedMessage}}</p

  • 在微信小程序里使用watch和computed的方法

    在开发 vue 的时候,我们可以使用 watch 和 computed 很方便的检测数据的变化,从而做出相应的改变,但是在小程序里,只能在数据改变时手动触发 this.setData() ,那么如何给小程序也加上这两个功能呢? 我们知道在 vue 里是通过 Object.defineProperty 来实现数据变化检测的,给该变量的 setter 里注入所有的绑定操作,就可以在该变量变化时带动其它数据的变化.那么是不是可以把这种方法运用在小程序上呢? 实际上,在小程序里实现要比 vue 里简单,

  • 详解vue中computed 和 watch的异同

    一.computed 和 watch 都可以观察页面的数据变化.当处理页面的数据变化时,我们有时候很容易滥用watch. 而通常更好的办法是使用computed属性,而不是命令是的watch回调. 这里我直接引用vue官网的例子来说明: html: 我们要实现 第三个表单的值 是第一个和第二个的拼接,并且在前俩表单数值变化时,第三个表单数值也在变化 <div id="myDiv"> <input type="text" v-model="

  • vue中计算属性(computed)、methods和watched之间的区别

    前言 本文主要给大家介绍了关于vue中计算属性(computed).methods和watched之间的区别,分享出来供大家参考学习,下面来一起看看详细的介绍: 计算属性 和普通属性一样是在模板中绑定计算属性的,当data中对应数据发生改变时,计算属性的值也会发生改变. Methods methods是方法,只要调用它,函数就会执行. 相同:两者达到的效果是同样的. 不同:计算属性是基于它们的依赖进行缓存的,只有相关依赖会发生改变时才会重新求职.只要相关依赖未改变,只会返回之前的结果,不再执行函

  • Vue的watch和computed方法的使用及区别介绍

    Vue的watch属性 Vue的watch属性可以用来监听data属性中数据的变化 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="lib/vue.min.js"></script> <script src="lib/vue-router-3

  • Vue.js每天必学之计算属性computed与$watch

    在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需要多于一个表达式的逻辑,应当使用**计算属性**. 基础例子 <div id="example"> a={{ a }}, b={{ b }} </div> var vm = new Vue({ el: '#example', data: { a: 1 }, comp

  • Vue中computed与methods的区别详解

    Vue中computed可以用来简单的拼接需要展示的数据 computed and methods 拼接展示数据的任务, 也可以用methods完成, 但当页面的数据变化时, methods中的方法会被重新调用(产生不必要的性能消耗), 而methods内的方法只有和自身有关的数据变化时才会被调用 一个简单的实例 computed只在初始化时被调用 computed只在初始化时被调用 methods会在数据变化时被调用, 即使变动的数据与自身无关 测试源码 <!DOCTYPE html> &l

  • 深入浅析Vue中的 computed 和 watch

    computed 计算属性:通过属性计算得来的属性 计算属性,是在相关联的属性发生变化才计算,计算过一次,如果相关属性没有变化,下一次就不需要计算了,直接去缓存的值 a:<input type="number" v-model.number="a" /> b:<input type="number" v-model.number="b" /> <!--c:<input type="

  • 深入浅析Vue.js中 computed和methods不同机制

    在vue.js中,有methods和computed两种方式来动态当作方法来用的 1.首先最明显的不同 就是调用的时候,methods要加上() 2.我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值. 而使用 methods ,在重新渲染的时候,函数总会重新调用执行 为了方便理解,先上一段源码 <!DOCTYPE html> <html> <head> <m

  • Vue中的methods、watch、computed的区别

    看到这个标题就知道这篇文章接下来要讲的内容,我们在使用vue的时候methods.watch.computed这三个特性一定经常使用,因为它们是非常的有用,但是没有彻底的理解它们的区别和各自的使用场景,也很难用好它们,希望接下来的介绍为你答疑解惑. computed 我们先来看计算属性:computed,光看名字也知道是用来干什么的,计算属性当然是用来计算的,但是是怎么计算的呢?计算属性有两个显著的特点: 计算属性计算时所依赖的属性一定是响应式依赖,否则计算属性不会执行 计算属性是基于依赖进行缓

随机推荐