前言

對于那些開始學(xué)習(xí)Vue的人來說，對于方法、計算屬性和觀察者之間的區(qū)別有點混淆。

盡管通?？梢允褂盟鼈冎械拿恳粋€來完成或多或少相同的事情，但了解每個人在哪里勝過其他人還是很重要的。

在這個快速提示中，我們將了解Vue應(yīng)用程序的這三個重要方面及其用例。我們將通過使用這三種方法中的每一種構(gòu)建相同的搜索組件來實現(xiàn)這一點。

Methods

在一個方法中，或多或少是您所期望的——一個對象屬性的函數(shù)。您可以使用方法對發(fā)生在DOM中的事件作出反應(yīng)，或者可以從組件中的其他位置調(diào)用它們，例如，從計算屬性或觀察者中調(diào)用它們。方法用于對公共功能進行分組-例如，處理表單提交，或構(gòu)建可重用的功能，如發(fā)出Ajax請求。

在Vue實例中的methods對象內(nèi)創(chuàng)建方法：

new Vue({
 el: "#app",
 methods: {
 handleSubmit() {}
 }
})

當(dāng)您想在模板中使用它時，您可以這樣做：

<div id="app">
 <button @click="handleSubmit">
 Submit
 </button>
</div>

我們使用v-on指令將事件處理程序附加到dom元素，該元素也可以縮寫為@符號。

現(xiàn)在，每次單擊按鈕時都會調(diào)用handleSubmit方法。對于要傳遞方法體中需要的參數(shù)的實例，可以執(zhí)行以下操作：

<div id="app">
 <button @click="handleSubmit(event)">
 Submit
 </button>
</div>

這里我們傳遞一個事件對象，例如，它允許我們在表單提交的情況下阻止瀏覽器的默認(rèn)操作。

但是，當(dāng)我們使用一個指令來附加事件時，我們可以使用一個修飾符來更優(yōu)雅地實現(xiàn)相同的事情： @click.stop=“handleSubmit” 。

現(xiàn)在我們來看一個使用方法過濾數(shù)組中數(shù)據(jù)列表的示例。

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:

在演示中，我們要呈現(xiàn)一個數(shù)據(jù)列表和一個搜索框。每當(dāng)用戶在搜索框中輸入值時，所呈現(xiàn)的數(shù)據(jù)都會發(fā)生更改。模板將如下所示：

<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方法，每次用戶在搜索字段中鍵入內(nèi)容時都會調(diào)用該方法。我們需要創(chuàng)建方法和數(shù)據(jù)：

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

雖然上面示例中的搜索可以按預(yù)期工作，但更優(yōu)雅的解決方案是使用計算屬性。計算屬性對于從現(xiàn)有源組合新數(shù)據(jù)非常方便，與方法相比，它們的一大優(yōu)點是緩存了輸出。這意味著，如果獨立于計算屬性的某些內(nèi)容在頁面上發(fā)生更改，并且重新呈現(xiàn)UI，則會返回緩存的結(jié)果，并且不會重新計算計算計算屬性，從而避免了可能代價高昂的操作。

計算屬性使我們能夠使用我們可用的數(shù)據(jù)進行即時計算。在本例中，我們有一個需要排序的項目數(shù)組。我們希望在用戶在輸入字段中輸入值時進行排序。

我們的模板看起來幾乎與前面的迭代相同，除了我們正在傳遞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>

腳本部分略有不同。我們聲明了數(shù)據(jù)屬性中的語言（以前這是一個空數(shù)組），而不是方法，我們將邏輯移入了計算屬性：

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計算屬性將包含包含輸入字段值的項數(shù)組。在第一次渲染時（當(dāng)輸入字段為空時），將渲染整個數(shù)組。當(dāng)用戶在字段中輸入值時，filteredList將返回一個數(shù)組，其中包含輸入到字段中的值。

使用計算屬性時，要計算的數(shù)據(jù)必須可用，否則將導(dǎo)致應(yīng)用程序出錯

computed屬性創(chuàng)建了一個新的filteredlist屬性，這就是為什么我們可以在模板中引用它。每次依賴項執(zhí)行此操作時，filteredlist的值都會更改。這里容易改變的依賴項是輸入值。

最后，請注意，計算屬性允許我們在模板中創(chuàng)建一個變量，該變量是由一個或多個數(shù)據(jù)屬性構(gòu)建的。一個常見的例子是從這樣一個用戶的名字和姓氏創(chuàng)建一個全名：

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

在模板中，您可以執(zhí)行全名。每當(dāng)名字或姓氏的值更改時，全名的值將更改。

Watchers

Watchers對于希望響應(yīng)已發(fā)生的更改（例如，屬性或數(shù)據(jù)屬性）執(zhí)行操作的情況非常有用。正如Vue文檔所提到的，當(dāng)您想要執(zhí)行異步或昂貴的操作以響應(yīng)不斷變化的數(shù)據(jù)時，這是最有用的。

在搜索示例中，我們可以返回到方法示例，并為輸入數(shù)據(jù)屬性設(shè)置一個觀察程序。然后我們可以對輸入值的任何變化作出反應(yīng)。

首先，讓我們恢復(fù)模板以使用語言數(shù)據(jù)屬性：

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

這里，我將觀察者設(shè)置為一個對象（而不是一個函數(shù)）。這是為了我可以指定一個即時屬性，它將導(dǎo)致觀察程序在組件被裝載后立即觸發(fā)。這會產(chǎn)生填充列表的效果。然后運行的函數(shù)在handler屬性中。

總結(jié)：

正如他們所說，擁有強大的力量，責(zé)任重大。Vue為您提供了構(gòu)建偉大應(yīng)用程序所需的超級能力。知道何時使用它們是構(gòu)建用戶喜愛的內(nèi)容的關(guān)鍵。方法、計算屬性和觀察者是您可用的超級能力的一部分。往前走，一定要好好利用它們！

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

好了，以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對腳本之家的支持。

最新評論