對(duì)于那些剛開始學(xué)習(xí)Vue的人來說，方法，計(jì)算屬性和觀察者之間的差異讓人有些困惑。盡管經(jīng)常可以使用它們中的每一個(gè)來完成或多或少相同的事情，但是知道它們?cè)谀男┓矫鎯?yōu)于其他的是很重要的。

創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：做網(wǎng)站、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的安順網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

在這個(gè)快速技巧中，我們將研究Vue應(yīng)用程序的這三個(gè)重要方面及其用例。我們將使用這三種方法中的每一種構(gòu)建相同的搜索組件。

方法

方法或多或少是你所期望的--一個(gè)函數(shù)，它是一個(gè)對(duì)象的屬性。 你可以使用方法對(duì)DOM中發(fā)生的事件做出反應(yīng)，也可以從組件中的其他位置（例如，在計(jì)算屬性或觀察程序中）調(diào)用它們。 方法用于對(duì)常用功能進(jìn)行分組--例如，用于處理表單提交或構(gòu)建可重用功能，例如發(fā)出Ajax請(qǐng)求。

你可以在methods對(duì)象內(nèi)部的Vue實(shí)例中創(chuàng)建方法：

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

當(dāng)想在模板中使用它時(shí)，您可以執(zhí)行以下操作：

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

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

handleSubmit方法將在每次單擊按鈕時(shí)被調(diào)用。例如，當(dāng)你想要傳遞方法體中需要的參數(shù)時(shí)，你可以執(zhí)行以下操作：

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

在這里，我們傳遞了一個(gè)事件對(duì)象，例如，它可以防止我們?cè)谔峤槐韱螘r(shí)阻止瀏覽器的默認(rèn)操作。

但是，由于我們使用指令附加事件，因此可以利用修飾符更優(yōu)雅地實(shí)現(xiàn)同一件事：@click.stop="handleSubmit"。

現(xiàn)在，讓我們看一個(gè)使用方法篩選數(shù)組中的數(shù)據(jù)列表的示例。

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

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

正如您所看到的，我們引用一個(gè)handleSearch方法，每次用戶在搜索字段中鍵入內(nèi)容時(shí)都會(huì)調(diào)用該方法。我們需要?jiǎng)?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方法使用輸入字段的值更新列出的項(xiàng)目。需要注意的一件事是，在methods對(duì)象中，不需要使用this.handleSearch引用該方法（在react中必須這樣做）。

計(jì)算屬性

盡管以上示例中的搜索按預(yù)期工作，但更優(yōu)雅的解決方案是使用計(jì)算屬性。 計(jì)算屬性對(duì)于從現(xiàn)有資源中組合新數(shù)據(jù)非常方便，并且與方法相比，它們的一大優(yōu)點(diǎn)是可以緩存其輸出。 這意味著，如果頁面上與計(jì)算屬性無關(guān)的某些內(nèi)容發(fā)生更改，并且UI會(huì)重新呈現(xiàn)，則將返回緩存的結(jié)果，并且將不會(huì)重新計(jì)算計(jì)算屬性，從而為我們節(jié)省了潛在的昂貴操作。

計(jì)算屬性使我們能夠使用可用的數(shù)據(jù)即時(shí)進(jìn)行計(jì)算。 在這種情況下，我們有一系列需要排序的項(xiàng)目。 我們想要在用戶在輸入字段中輸入值時(shí)進(jìn)行排序。

我們的模板看起來與之前的迭代幾乎相同，除了我們向v-for指令傳遞了一個(gè)計(jì)算屬性（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>

腳本部分略有不同。我們?cè)?code>data屬性中聲明語言（以前這是一個(gè)空數(shù)組），而不是將方法轉(zhuǎn)移到計(jì)算屬性中的方法：

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

當(dāng)使用計(jì)算屬性時(shí)，要計(jì)算的數(shù)據(jù)必須可用，否則將導(dǎo)致應(yīng)用程序錯(cuò)誤。

計(jì)算屬性創(chuàng)建了一個(gè)新的filteredList屬性，這就是為什么我們可以在模板中引用它的原因。每次依賴項(xiàng)發(fā)生變化時(shí)，filteredList的值就會(huì)發(fā)生變化。這里容易改變的依賴關(guān)系是input的值。

最后，請(qǐng)注意，計(jì)算屬性使我們可以創(chuàng)建一個(gè)變量，以在由一個(gè)或多個(gè)數(shù)據(jù)屬性構(gòu)建的模板中使用。一個(gè)常見的示例是fullName從用戶的名字和姓氏創(chuàng)建一個(gè)，如下所示：

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

在模板中，您可以執(zhí)行{{fullName}}。每當(dāng)?shù)谝粋€(gè)或最后一個(gè)名稱的值發(fā)生變化時(shí)，fullName的值就會(huì)發(fā)生變化。

觀察者

當(dāng)您希望對(duì)發(fā)生的更改(例如，對(duì)一個(gè)道具或數(shù)據(jù)屬性)執(zhí)行一個(gè)操作時(shí)，觀察者非常有用。正如Vue文檔所述，當(dāng)您希望執(zhí)行異步或昂貴的操作來響應(yīng)數(shù)據(jù)更改時(shí)，這是最有用的。

在我們的搜索示例中，我們可以返回到方法示例，并為inputdata屬性設(shè)置一個(gè)監(jiān)視程序。然后，我們可以對(duì)input值的任何變化做出反應(yīng)。

首先，讓我們還原模板以利用languagesdata屬性：

<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實(shí)例將如下所示：

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

在這里，我已經(jīng)將觀察者作為對(duì)象（而不是函數(shù)）。這樣，我可以指定一個(gè)immediate屬性，該屬性將導(dǎo)致觀察者在安裝組件后立即觸發(fā)。這具有填充列表的效果。然后，運(yùn)行的函數(shù)在該handler屬性中。

結(jié)論

正如他們所說，強(qiáng)大的力量伴隨著巨大的責(zé)任。Vue為您提供了構(gòu)建出色應(yīng)用程序所需的超能力。知道何時(shí)使用它們是建立用戶喜愛的關(guān)鍵。方法、計(jì)算屬性和觀察者是您可以使用的超能力的一部分。展望未來，一定要好好利用它們!

相關(guān)推薦：

2020年前端vue面試題大匯總（附答案）

vue教程推薦：2020最新的5個(gè)vue.js視頻教程精選

更多編程相關(guān)知識(shí)，請(qǐng)?jiān)L問：編程入門！！

網(wǎng)站欄目：Vue中Computed屬性、Methods和Watch之間的差異
分享路徑：http://chinadenli.net/article32/cgposc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、搜索引擎優(yōu)化、營銷型網(wǎng)站建設(shè)、網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、全網(wǎng)營銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)