聊聊Vue中的計算屬性、方法與偵聽器-Vue.js-PHP中文網

1 計算屬性 computed

2 方法methods

3 偵聽器watch

首頁

web前端

Vue.js

聊聊Vue中的計算屬性、方法與偵聽器

青灯夜游

Mar 29, 2023 pm 05:54 PM

javascript 前端 vue.js

這篇文章帶大家學習Vue，聊聊Vue基礎理論實操，介紹一下Vue中的計算屬性、方法與偵聽器，希望對大家有所幫助！

聊聊Vue中的計算屬性、方法與偵聽器

需求：在data 中，有firstName 和lastName 兩個內容，頁面顯示「全名fullName 」。

透過上一篇文章可以知道，我們直接使用插值表達式就能實現這個需求：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>前端一万小时-计算属性、方法与侦听器</title>
  <script src="./vue.js"></script>
</head>
<body>
  <div id="app">
    {{firstName + &#39; &#39; + lastName}} <!-- 2️⃣使用插值表达式展示全名。 -->
  </div>

  <script>
    var vm = new Vue({
      el: &#39;#app&#39;,

      data: { // 1️⃣在 data 中定义一组数据，里面有 firstName 和 lastName 两个内容；
        firstName: &#39;Oli&#39;,
        lastName: &#39;Zhao&#39;
      }
    })
  </script>
</body>
</html>

登入後複製

聊聊Vue中的計算屬性、方法與偵聽器

但需求是實現了，可同時模板上就有了一些邏輯。而模板本身就是用來顯示就好，不需要添加邏輯在裡面！【相關推薦：vuejs影片教學、web前端開發】

#理想的方式是在插值表達式中直接加入fullName 變數來顯示全名：

<div id="app">
  {{fullName}}
</div>

<script>
  var vm = new Vue({
    el: &#39;#app&#39;,
    data: {
      firstName: &#39;Oli&#39;,
      lastName: &#39;Zhao&#39;,
      fullName: &#39;Oli Zhao&#39; // ❗️data 中添加了 fullName！
    }
  })
</script>

登入後複製

聊聊Vue中的計算屬性、方法與偵聽器

可以看到，當程式碼這樣寫時也是沒有問題的。

但其實程式碼冗餘了：原本data 內已經有了firstName 和lastName ，可以用它們組合出全名，但又重新定義了一次fullName 。

接下來，將介紹另外三種方法來解決這個需求。

1 計算屬性 `computed`

<div id="app">
  {{fullName}}
</div>

<script>
  var vm = new Vue({
    el: &#39;#app&#39;,
    data: {
      firstName: &#39;Oli&#39;,
      lastName: &#39;Zhao&#39;
    },

    computed: { // 1️⃣计算属性 computed 属于 Vue 实例的方法，直接定义在实例中；

      fullName() { // 2️⃣计算属性的值 fullName 是一个函数；

        return this.firstName + &#39; &#39; + this.lastName // ❗️一定要写上 return 把计算结果返回！
      }
    }
  })
</script>

登入後複製

使用計算屬性後，程式碼完全不會冗餘，fullName 是根據firstName 和lastName 計算出來的，頁面上的效果也是一樣。聊聊Vue中的計算屬性、方法與偵聽器

計算屬性還有一個非常重要的知識點：

計算屬性會基於它們的回應式依賴進行快取。

也就是說，當計算屬性所依賴的資料改變時，它會重新計算；若沒有變更時，則不計算，會一直使用上一次計算的結果（這樣也就提高了一些性能）。

在我們的程式碼中，當firstName 或lastName 改變時，fullName 會重新計算，不變時則用快取的上次計算結果。

<div id="app">
  {{fullName}}

  {{age}} <!-- 2️⃣把 age 渲染到模板上； -->
  
</div>

<script>
  var vm = new Vue({
    el: &#39;#app&#39;,
    data: {
      firstName: &#39;Oli&#39;,
      lastName: &#39;Zhao&#39;,

      age: 18 // 1️⃣data 中添加 age 为 18；
    },
    computed: {
      fullName() {
        console.log(&#39;计算了一次&#39;) // 3️⃣每当执行时 console.log 一次。
        return this.firstName + &#39; &#39; + this.lastName
      }
    }
  })
</script>

登入後複製

儲存重新整理網頁後，可以看到計算屬性 計算了一次 。當在控制台輸入vm.age = 20 更改age 後，頁面重新渲染了，“18”變為了“20”，但控制台沒有再次輸出計算了一次 ，即計算屬性沒有進行重新計算。

聊聊Vue中的計算屬性、方法與偵聽器

而當我們改變lastName 後，會重新計算一次：

聊聊Vue中的計算屬性、方法與偵聽器

2 方法`methods`

第二種是我們已經很熟悉的方法 methods ：

<div id="app">

  <!-- ❗️注意：在插值表达式内，计算属性通过属性的名字就可以用，但调用方法时，
	一定要加上 () 来进行调用！ -->
  {{fullName()}}

  {{age}}
</div>

<script>
  var vm = new Vue({
    el: &#39;#app&#39;,
    data: {
      firstName: &#39;Oli&#39;,
      lastName: &#39;Zhao&#39;,
      age: 18
    },

    methods: { // ❗️在 methods 中定义 fullName 方法，逻辑上与计算属性一样；
      fullName() { 
        console.log(&#39;计算了一次&#39;)
        return this.firstName + &#39; &#39; + this.lastName
      }
    }

  })
</script>

登入後複製

儲存後，刷新頁面查看效果時，它會進行一次計算。當我們更改age 時，它會再計算一次，更改lastName 時也會進行一次計算：聊聊Vue中的計算屬性、方法與偵聽器

所以方法是沒有緩存機制的，只要頁面重新渲染， fullName 方法就會被重新執行一次。

3 偵聽器`watch`

當使用偵聽器時，不可避免的會讓程式碼冗餘：

<div id="app">

  {{fullName}} <!-- 1️⃣-②：插值表达式内不需要 ()； -->

  {{age}}
</div>

<script>
  var vm = new Vue({
    el: &#39;#app&#39;,
    data: {
      firstName: &#39;Oli&#39;,
      lastName: &#39;Zhao&#39;,
      fullName: &#39;Oli Zhao&#39;, // 1️⃣-①：data 中定义 fullName；
      age: 18
    },

    watch: {  // 2️⃣在实例中定义侦听器 watch；

      firstName() { /*
      							2️⃣-①：定义 firstName 方法，对 firstName 进行侦听，
                    当它改变时，重新对 fullName 赋值；
                     */
        console.log(&#39;计算了一次&#39;)
        this.fullName = this.firstName + &#39; &#39; + this.lastName
      },

      lastName() { /*
      						 2️⃣-②：定义 lastName 方法，对 lastName 进行侦听，
                   当它改变时，重新对 fullName 赋值。
                    */
        console.log(&#39;计算了一次&#39;)
        this.fullName = this.firstName + &#39; &#39; + this.lastName
      }
    }

  })
</script>

登入後複製

儲存後回到頁面重新整理。當第一次進入頁面時，因為我們重新定義過 fullName ，所以 watch 不會進行計算就會顯示出來。在修改與fullName 不想關的資料age 後，由於我們只用watch 偵聽了firstName 和lastName ，所以也不會進行計算。當我們修改 lastName 時，則進行一次計算：

聊聊Vue中的計算屬性、方法與偵聽器

#總結：

methods 會在每次渲染頁面都執行一次方法；
watch 和computed 都具備快取機制，但watch 的文法比computed 的文法複雜了許多。

所以一般情況下，當一個功能可以透過watch 、 methods 和computed 方法都可以實現時，首推「計算屬性computed 」。

（學習影片分享：vuejs入門教學、程式設計基礎影片）

以上是聊聊Vue中的計算屬性、方法與偵聽器的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學

1666

CakePHP 教程

1425

Laravel 教程

1323

PHP教程

1272

C# 教程

1251

Related knowledge

PHP與Vue：完美搭檔的前端開發利器 Mar 16, 2024 pm 12:09 PM

PHP與Vue：完美搭檔的前端開發利器在當今網路快速發展的時代，前端開發變得愈發重要。隨著使用者對網站和應用的體驗要求越來越高，前端開發人員需要使用更有效率和靈活的工具來創建響應式和互動式的介面。 PHP和Vue.js作為前端開發領域的兩個重要技術，搭配起來可以稱得上是完美的利器。本文將探討PHP和Vue的結合，以及詳細的程式碼範例，幫助讀者更好地理解和應用這兩

Django是前端還是後端？一探究竟！ Jan 19, 2024 am 08:37 AM

Django是一個由Python編寫的web應用框架，它強調快速開發和乾淨方法。儘管Django是web框架，但要回答Django是前端還是後端這個問題，需要深入理解前後端的概念。前端是指使用者直接和互動的介面，後端是指伺服器端的程序，他們透過HTTP協定進行資料的互動。在前端和後端分離的情況下，前後端程式可以獨立開發，分別實現業務邏輯和互動效果，資料的交

Go語言前端技術探秘：前端開發新視野 Mar 28, 2024 pm 01:06 PM

Go語言作為一種快速、高效的程式語言，在後端開發領域廣受歡迎。然而，很少有人將Go語言與前端開發聯繫起來。事實上，使用Go語言進行前端開發不僅可以提高效率，還能為開發者帶來全新的視野。本文將探討使用Go語言進行前端開發的可能性，並提供具體的程式碼範例，幫助讀者更了解這一領域。在傳統的前端開發中，通常會使用JavaScript、HTML和CSS來建立使用者介面

簡易JavaScript教學：取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教學：如何取得HTTP狀態碼，需要具體程式碼範例前言：在Web開發中，經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時，我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功，並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼，並提供一些實用的程式碼範例。使用XMLHttpRequest

Django：前端和後端開發都能搞定的神奇框架！ Jan 19, 2024 am 08:52 AM

Django：前端和後端開發都能搞定的神奇框架！ Django是一個高效、可擴展的網路應用程式框架。它能夠支援多種Web開發模式，包括MVC和MTV，可以輕鬆地開發出高品質的Web應用程式。 Django不僅支援後端開發，還能夠快速建構出前端的介面，透過模板語言，實現靈活的視圖展示。 Django把前端開發和後端開發融合成了一種無縫的整合，讓開發人員不必專門學習

前端面試官常問的問題 Mar 19, 2024 pm 02:24 PM

在前端開發面試中，常見問題涵蓋廣泛，包括HTML/CSS基礎、JavaScript基礎、框架和函式庫、專案經驗、演算法和資料結構、效能最佳化、跨域請求、前端工程化、設計模式以及新技術和趨勢。面試官的問題旨在評估候選人的技術技能、專案經驗以及對行業趨勢的理解。因此，應試者應充分準備這些方面，以展現自己的能力和專業知識。

如何在JavaScript中取得HTTP狀態碼的簡單方法 Jan 05, 2024 pm 01:37 PM

JavaScript中的HTTP狀態碼取得方法簡介：在進行前端開發中，我們常常需要處理與後端介面的交互，而HTTP狀態碼就是其中非常重要的一部分。了解並取得HTTP狀態碼有助於我們更好地處理介面傳回的資料。本文將介紹使用JavaScript取得HTTP狀態碼的方法，並提供具體程式碼範例。一、什麼是HTTP狀態碼HTTP狀態碼是指當瀏覽器向伺服器發起請求時，服務

Golang與前端技術結合：探討Golang如何在前端領域發揮作用 Mar 19, 2024 pm 06:15 PM

Golang與前端技術結合：探討Golang如何在前端領域發揮作用，需要具體程式碼範例隨著互聯網和行動應用的快速發展，前端技術也愈發重要。而在這個領域中，Golang作為一門強大的後端程式語言，也可以發揮重要作用。本文將探討Golang如何與前端技術結合，以及透過具體的程式碼範例來展示其在前端領域的潛力。 Golang在前端領域的角色作為一門高效、簡潔且易於學習的

See all articles

聊聊Vue中的計算屬性、方法與偵聽器

1 計算屬性 computed

2 方法methods

3 偵聽器watch

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題

1 計算屬性 `computed`

2 方法`methods`

3 偵聽器`watch`