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为您提供了构建伟大应用程序所需的超级能力。知道什么时候使用它们是构建用户喜好的内容的关键。方法、计算属性和观察者是您可用的超级能力的一部分。往前走，必定要好好利用它们！

原文地址：www.sitepoint.com/the-differe…添加连接描述