vue的計算屬性與方法的不同

2022-09-06 07:48:12 字數 867 閱讀 4499

vue的模板裡可以使用表示式,但是它的設計初衷是用於簡單計算,在模板中放入太多邏輯會讓模板過重且難以維護。例如:

}

這裡很難一眼看出是要顯示什麼,而且要多次使用的話也很麻煩,因此對於複雜邏輯應使用計算屬性錯誤示例

```html

title

正確寫法

```html

}

## 計算屬性與方法的不同

上述例子中也可以通過呼叫方法來達到同樣的目的

在元件中定義方法

// 在元件中

methods:

}

呼叫方法

reversed message: "}"

就得到的結果而言,兩種方式是完全一致的。但是不同的是,計算屬性是基於它們的依賴進行快取的,也就是說,計算屬性只有在它的相關依賴發生改變時才會重新求值,對於上述的例子,只要message不發生改變,多次訪問reversedmessage計算屬性會立即返回結果而不必再次執行函式

下面我們來驗證這個結論

```html

title

}

使用方法

}

```開啟html,右鍵檢查-console

## 小結

-模板內表示式包含複雜邏輯時,應使用計算屬性-只要計算屬性使用的資料不發生變化,計算屬性就不會執行,而是直接使用快取

Vue的計算屬性與watch

一 vue的計算屬性是什麼?它的計算屬性是computed 二 計算屬性computed的特點有哪些?doctype html utf 8 title script head text v model firstname text v model lastname div newvue comput...

vue的計算屬性與watch

vue中計算屬性,監聽的物件為深度監聽,資料會進行快取,依賴修改了才會進行重新整理 watch,監聽的物件只是物件的位址,並不會對屬性進行監聽,如果要監聽屬性,可以在在方法名為 obj.attr 監聽attr屬性。可以設定deep為true,不過效能開銷比較大,watch當頁面剛載入,不會執行,只有...

vue計算屬性和方法的區別

計算屬性是 模版中使用表示式 的乙個補充。我們知道模版中可以寫很多js中的方法等,如果邏輯較為複雜,在模版中使用表示式就會讓模版顯得太複雜,不便於閱讀。比如我們之前的 p 計算屬性寫法 計算屬性和data methods watch是乙個級別的,所以它的位置也和它們一樣 export default...