計算屬性與方法的區別

阿新 • • 發佈：2021-01-10

計算屬性與方法的區別

計算屬性是基於它們的依賴進行快取的
方法不存在快取

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body 
>
  <div id = "app">
  <div>{{msg}}</div>
  <div>{{reverseString}}</div>
  <div>{{reverseString}}</div>

</div>
  <script src="vue.js"></script>
  <script>
    /*計算屬性*/ 
    var vm = new Vue({
      el: '#app',
      data: 
 {
        msg:"hahahahaaaaaaaaa"
      },
      // 計算屬性其實是基於data中的屬性來做處理的，
      // 資料如果發生變化，計算屬性最終計算的結果也是跟著變化的
      computed:{
        reverseString: function(){
          console.log('computed')
          return this.msg.split('').reverse().join('');
        }
      }
    });
  </script> 

</body>
</html>

在這裡插入圖片描述

computed 計算屬性裡的方法在第一次訪問的時候已經執行了，並且把計算邏輯已經處理好了，把處理好的結果已經快取起來了。等再次執行的時候它會訪問之前計算的結果，就是快取裡面已經存在的資料。
快取的好處是節省耗時的計算以節省一些效能。同樣的結果沒有必要計算兩次。

Document {{msg}} {{reverseString}} {{reverseString}} {{reverseMessage()}} {{reverseMessage()}}

在這裡插入圖片描述

methods方法函式每呼叫一次就會執行一次函式，但是計算屬性computed如果是同樣的資料，對應的data值沒有發生變化的話，多次訪問都是第一次計算的那個結果。
計算屬性是基於它們的依賴進行快取的，這裡的依賴指的就是data裡面的資料，因為computed做處理的時候都是依賴於data中的資料做處理的，只要資料中的值不發生變化，那這個計算中的結果始終是被快取的。如果data值變了的話computed裡的值也會被重新計算。快取是基於data裡的資料做快取的，data值改變值會重新計算。方法methods就不存在快取的機制了。每呼叫一次重新執行一次方法。這是computed計算屬性和methods方法的區別。
快取的意義是如果函式體內所做的工作比較複雜比較耗時的話，時間開銷就會比較大，利用快取就可以節省效能。

有關vue中的計算屬性與方法、計算屬性與監聽屬性的區別

一、計算屬性與方法首先兩者返回的結果一樣，但是 1、計算屬性他是依賴於響應式快取的，也就是說當響應式資訊沒有改變時，它會利用原先的快取進行顯示，而不用不停的去呼叫方法

計算屬性與方法的區別

計算屬性與方法的區別計算屬性是基於它們的依賴進行快取的方法不存在快取

Vue 計算屬性與方法

computed 基本使用　　如果資料需要有複雜的計算，則可以在Vue例項中定義計算屬性，再交由mustache進行渲染。

Vue.js中計算屬性和方法的區別

技術標籤：vue.js computed和methods 計算屬性是基於它們的響應式依賴進行快取的。方法不是基於響應式依賴。每修改相關響應式值時，呼叫方法將總會再次執行函式。當修改相關響應式值時，基於響應式依賴的值會隨之

計算屬性，方法與監聽器（3-4）

技術標籤：Vue 計算屬性，方法與監聽器在我們選擇計算的時候，我們一共有3種方式實現。但是我們率先考慮的是計算屬性computed因為，對於methods方法來說，沒有快取機制會降低效能。而computed和watch有快取機制

python圖形開發GUI庫pyqt5的詳細使用方法及各控制元件的屬性與方法

本文主要列出來python圖形開發GUI庫pyqt5的窗體,控制元件屬性與方法如果你想看看python圖形開發GUI庫pyqt5的基礎使用方法可以檢視我們的另一篇文章 python圖形開發GUI庫pyqt5的基本使用方法詳解

JavaScript中的全域性屬性與方法深入解析

今天來補充JavaScript中的最後一部分內容，JavaScript中的全域性屬性和方法(函式)。

Python 簡明教程 --- 20，Python 類中的屬性與方法

微信公眾號：碼農充電站pro 個人主頁：https://codeshellme.github.io 與客戶保持良好的關係可以使生產率加倍。

BOM相關物件的屬性與方法

BOM BOM - Browser Object Model ( 瀏覽器物件模型 )，BOM 主要用於操作與管理瀏覽器相關狀態。BOM 由以 window 物件為主以及其他常用物件如 navigator 、location 、history 、screen 、document 等等功能各異的物

13面向物件---屬性與方法

類的結構使用面相物件開發，第 1 步是設計類使用類名() 建立物件，建立物件的動作有兩步：

path屬性與方法的學習和整理

path 模組提供了許多非常實用的函式來訪問檔案系統並與檔案系統進行互動。

Flutter scaffold元件的屬性與方法

Scaffold 是承載material design 控制元件的佈局控制元件，可以展示drawers、snack bars、bottom sheets。每個頁面的佈局都是在這裡面。相當於iOS中UIViewController中的self.view。

JavaScript陣列型別Array相關的屬性與方法詳解

Array陣列型別詳解在ECMAScript中除了object型別之外，Array陣列用的是最常用的型別。ECMAScript陣列可以在每一項儲存任何型別的值，無需指定陣列的長度，還可以隨著資料的增長來增加陣列長度，這些是和其他語言的陣

Java構造器(構造方法)與方法區別說明

構造器，又稱為構造方法。構造器用於構造該類的例項，也就是物件。格式如下：[修飾符] 類名 (形參列表){//n條語句}

JavaScript 語法：陣列的定義及其常用屬性與方法

作者:WangMin 格言:努力做好自己喜歡的每一件事當一個程式需要用到多個數據的時候，這時我們就需要用到陣列來將這些資料集合起來，以便後期呼叫。接下來就開始學習吧！！

VUE 計算屬性和方法

我們可以將同一函式定義為一個方法而不是一個計算屬性。兩種方式的最終結果確實是完全相同的。然而，不同的是計算屬性是基於它們的響應式依賴進行快取的。只在相關響應式依賴發生改變時它們才會重新求值。這就意味著

ASP.NET CORE 重寫IControllerActivator實現預設IOC屬性與方法注入

1.建立控制器的過程依賴眾多不同的提供者和工廠類，但最終是由實現IControllerActivator介面的例項來決定的。實現類只需要實現兩個方法：

vue計算屬性與監視屬性

技術標籤：vue.js 計算屬性與監視屬性計算屬性在computed物件中定義計算屬性的方法，在頁面中使用{{方法名}} 監視屬性通過 vm物件中的$watch方法或者 watch配置來監視指定的屬性，當屬性發生變化時，回撥函式

computed計算屬性與watch監聽

技術標籤：vuevue計算屬性watch監聽座右銘：越努力越幸運，越運動越健康。熱愛前端技術，熱愛運動的（愛笑，傻傻的）這樣一個人

Vue中計算屬性是方法

對於常規的計算屬性，都是直接返回單個值，如： computed: { result() { return this.one + this.two

計算屬性與方法的區別

計算屬性與方法的區別

相關推薦