搜尋
首頁web前端js教程VUE的計算屬性與偵聽器使用案例

這次帶給大家VUE的運算屬性和偵聽器使用案例,使用VUE運算屬性和偵聽器注意事項有哪些,下面就是實戰案例,一起來看一下。

寫在最前面

上篇的vue的使用 說了vue生命週期、vue實例、模板語法。這次我們來說vue的計算屬性和偵聽器

計算屬性

在vue裡面模板內的表達式非常便利,但是設計它們的初衷是用於簡單運算的。在模板中放入太多的邏輯會讓模板過重且難以維護。例如:

<div id="example">
  {{ message.split(&#39;&#39;).reverse().join(&#39;&#39;) }}
</div>

在這個地方,模板不再是簡單的宣告式邏輯。你必須看一段時間才能意識到,這裡的一串程式碼到底是要做什麼,當你想要在模板中多次引用這裡時,就會更加難以處理。
所以,對於任何複雜邏輯,你都應當使用計算屬性。

例如

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
  el: &#39;#example&#39;,
  data: {
    message: &#39;Hello&#39;
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例      return this.message.split(&#39;&#39;).reverse().join(&#39;&#39;)
    }
  }
})
Original message: "Hello"
Computed reversed message: "olleH"

這裡宣告了一個計算屬性 reversedMessage。 vue提供的函數將用作屬性vm.reversedMessage 的getter 函數:

console.log(vm.reversedMessage) // => 'olleH'vm.message = 'Goodbye'console.log(vm. reversedMessage) // => 'eybdooG'

你可以像綁定普通屬性一樣在模板中綁定計算屬性。 Vue 知道 vm.reversedMessage 依賴 vm.message,因此當 vm.message 發生變更時,所有依賴 vm.reversedMessage 的綁定也會更新。而且最妙的是vue已經以聲明的方式創建了這種依賴關係:計算屬性的 getter 函數是沒有副作用 (side effect) 的,這使它更易於測試和理解。

計算屬性快取vs 方法

你可能已經注意到vue可以透過在表達式中呼叫方法來達到相同的效果:

<p>Reversed message: "{{ reversedMessage() }}"</p>
// 在组件中
methods: {
  reversedMessage: function () {    return this.message.split(&#39;&#39;).reverse().join(&#39;&#39;)
  }
}

vue可以將相同函數定義為一個方法而不是一個計算屬性。兩種方式的最終結果確實是完全相同的。然而,不同的是計算屬性是基於它們的依賴進行快取的。計算屬性只有在它的相關依賴發生改變時才會重新求值。這就意味著只要 message 還沒有改變,多次存取 reversedMessage 計算屬性會立即傳回先前的計算結果,而不必再執行函數。
這也同樣意味著下面的計算屬性將不再更新,因為Date.now() 不是響應式依賴:

computed: {
  now: function () {    return Date.now()
  }
}

相比之下,每當觸發重新渲染時,調用方法將總是會再次執行函數。

我們為什麼需要快取?假設我們有一個效能開銷比較大的計算屬性 A,它需要遍歷一個巨大的陣列並做大量的計算。然後我們可能有其他的計算屬性依賴 A 。如果沒有緩存,我們將不可避免的多次執行 A 的 getter!如果你不希望有緩存,請用方法來替代。

計算屬性 vs 偵聽屬性

Vue 提供了一種更通用的方式來觀察和回應 Vue 實例上的資料變動:偵聽屬性。當你有一些數據需要隨著其它數據變動而變動時,你很容易濫用 watch——特別是如果你之前使用過 AngularJS。然而,通常更好的做法是使用計算屬性而不是命令式的 watch 回呼。細想這個範例:

<div id="demo">{{ fullName }}</div>
var vm = new Vue({
  el: &#39;#demo&#39;,
  data: {
    firstName: &#39;Foo&#39;,
    lastName: &#39;Bar&#39;,
    fullName: &#39;Foo Bar&#39;
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + &#39; &#39; + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + &#39; &#39; + val
    }
  }
})

上面程式碼是命令式且重複的。將它與計算屬性的版本進行比較:

var vm = new Vue({
  el: &#39;#demo&#39;,
  data: {
    firstName: &#39;Foo&#39;,
    lastName: &#39;Bar&#39;
  },
  computed: {
    fullName: function () {      return this.firstName + &#39; &#39; + this.lastName
    }
  }
})

計算屬性的setter

計算屬性預設只有getter ,不過在需要時你也可以提供一個setter :

// ...
computed: {
  fullName: {
    // getter
    get: function () {      return this.firstName + &#39; &#39; + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(&#39; &#39;)
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

現在再執行vm.fullName = 'John Doe' 時,setter 會被調用,vm.firstName 和vm.lastName 也會相應地被更新。

監聽器

雖然運算屬性在大多數情況下更合適,但有時也需要一個自訂的偵聽器。這就是為什麼 Vue 透過 watch 選項提供了一個更通用的方法,來回應資料的變化。當需要在資料變更時執行非同步或開銷較大的操作時,這個方式是最有用的。
例如:

<div id="watch-example">
  <p>
    Ask a yes/no question:
    <input v-model="question">
  </p>
  <p>{{ answer }}</p>
</div>
<!-- 因为 AJAX 库和通用工具的生态已经相当丰富,Vue 核心代码没有重复 -->
<!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
<script>
var watchExampleVM = new Vue({
  el: &#39;#watch-example&#39;,
  data: {
    question: &#39;&#39;,
    answer: &#39;I cannot give you an answer until you ask a question!&#39;
  },
  watch: {
    // 如果 `question` 发生改变,这个函数就会运行
    question: function (newQuestion, oldQuestion) {
      this.answer = &#39;Waiting for you to stop typing...&#39;
      this.getAnswer()
    }
  },
  methods: {
    // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
    // 在这个例子中,我们希望限制访问 yesno.wtf/api 的频率
    // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
    // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识,
    // 请参考:https://lodash.com/docs#debounce
    getAnswer: _.debounce(
      function () {        if (this.question.indexOf(&#39;?&#39;) === -1) {
          this.answer = &#39;Questions usually contain a question mark. ;-)&#39;
          return
        }
        this.answer = &#39;Thinking...&#39;
        var vm = this
        axios.get(&#39;https://yesno.wtf/api&#39;)
          .then(function (response) {
            vm.answer = _.capitalize(response.data.answer)
          })
          .catch(function (error) {
            vm.answer = &#39;Error! Could not reach the API. &#39; + error
          })
      },
      // 这是我们为判定用户停止输入等待的毫秒数      500
    )
  }
})
</script>

結果:

在這個範例中,使用watch 選項允許我們執行非同步操作(存取一個API),限制我們執行該操作的頻率,並在我們得到最終結果前,設定中間狀態。這些都是計算屬性無法做到的。

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

相關閱讀:

vue生命週期、vue實例、範本語法

前端微信分享jssdk config:invalid signature 簽章錯誤的解決方法

一次前端面試的經驗

#

以上是VUE的計算屬性與偵聽器使用案例的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
如何在Go中使用命名管道?如何在Go中使用命名管道?May 11, 2023 pm 04:22 PM

命名管道是一种在操作系统中相对比较低级的进程通信方式,它是一种以文件为中介的进程通信方式。在Go语言中,通过os包提供了对命名管道的支持。在本文中,我们将介绍如何在Go中使用命名管道来实现进程间通信。一、命名管道的概念命名管道是一种特殊的文件,可以被多个进程同时访问。在Linux系统中,命名管道是一种特殊的文件类型,它们存在于文件系统的某个位置上,并且可以在

如何在Go中使用第三方库?如何在Go中使用第三方库?May 11, 2023 pm 03:30 PM

在Go语言中,使用第三方库是非常方便的。许多优秀的第三方库和框架可以帮助我们快速地开发应用程序,同时也减少了我们自己编写代码的工作量。但是如何正确地使用第三方库,确保其稳定性和可靠性,是我们必须了解的一个问题。本文将从以下几个方面介绍如何使用第三方库,并结合具体例子进行讲解。一、第三方库的获取Go语言中获取第三方库有以下两种方式:1.使用goget命令首先

如何在PHP中使用协程?如何在PHP中使用协程?May 12, 2023 am 08:10 AM

随着传统的多线程模型在高并发场景下的性能瓶颈,协程成为了PHP编程领域的热门话题。协程是一种轻量级的线程,能够在单线程中实现多任务的并发执行。在PHP的语言生态中,协程得到了广泛的应用,比如Swoole、Workerman等框架就提供了对协程的支持。那么,如何在PHP中使用协程呢?本文将介绍一些基本的使用方法以及常见的注意事项,帮助读者了解协程的运作原理,以

如何在Go中使用WebSocket?如何在Go中使用WebSocket?May 11, 2023 pm 04:17 PM

近年来,WebSocket技术已经成为了Web开发中不可或缺的一部分。WebSocket是一种在单个TCP连接上进行全双工通信的协议,它使得客户端和服务器之间的通信更加流畅和高效。如今,很多现代的Web应用程序都使用了WebSocket技术,例如实时聊天、在线游戏以及实时数据可视化等。Go语言作为一个现代的编程语言,自然也提供了很好的支持WebSock

如何在 Windows 11 中按需使用 OneDrive 的文件如何在 Windows 11 中按需使用 OneDrive 的文件Apr 14, 2023 pm 12:34 PM

&lt;p&gt;Windows 系统上的 OneDrive 应用程序允许您将文件存储在高达 5 GB 的云上。OneDrive 应用程序中还有另一个功能,它允许用户选择一个选项,是将文件保留在系统空间上还是在线提供,而不占用您的系统存储空间。此功能称为按需文件。在这篇文章中,我们进一步探索了此功能,并解释了有关如何在 Windows 11 电脑上的 OneDrive 中按需使用文件的各种选项。&lt;/p&gt;&lt;h2&gt;如何使用 On

如何在Go中使用音频处理?如何在Go中使用音频处理?May 11, 2023 pm 04:37 PM

随着音频处理在各种应用场景中的普及,越来越多的程序员开始使用Go编写音频处理程序。Go语言作为一种现代化的编程语言,具有优秀的并发性和高效率的特点,使用它进行音频处理十分方便。本文将介绍如何在Go中使用音频处理技术,包括读取、写入、处理和分析音频数据等方面的内容。一、读取音频数据在Go中读取音频数据有多种方式。其中比较常用的是使用第三方库进行读取,比如go-

如何在Go中使用嵌套结构?如何在Go中使用嵌套结构?May 11, 2023 pm 04:39 PM

在Go语言中,嵌套结构是一种非常常见的技术。通过将一个结构体嵌入到另一个结构体中,我们可以将复杂的数据模型分解成更小的部分,使其易于理解和维护。本篇文章将介绍如何在Go中使用嵌套结构以及一些最佳实践。一、定义嵌套结构首先,我们需要定义一个包含嵌套结构的结构体。下面的代码演示了如何定义一个包含Person结构体的Company结构体:typePersons

如何在Go中使用反转依赖?如何在Go中使用反转依赖?May 11, 2023 pm 03:39 PM

Go语言中的反转依赖是一种非常实用的技术,它可以帮助开发者更好地进行软件开发。在本文中,我们将详细介绍什么是反转依赖,并且演示如何在Go语言中使用它来优化软件。一、什么是反转依赖在传统的软件开发中,模块之间存在着依赖关系。一些模块被其他模块所依赖,而另一些模块则依赖于其他模块。这种依赖关系在软件中非常普遍,但同时也会带来很多问题。一旦一个模块的代码发生了变化

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版