ELf28資訊網——每日最新資訊28at.com

大家好，本篇文章我們繼續學習和 Vue 相關的內容，今天我們歸納總結下什么是 computed 計算屬性、如何使用和應用場景，以及 computed 和 Method 事件的區別和應用場景。ELf28資訊網——每日最新資訊28at.com

什么是 computed 計算屬性

Vue.js 中的 computed 計算屬性是一種特殊類型的屬性，它們的值不是簡單地被設置，而是根據其它屬性的值計算得出。ELf28資訊網——每日最新資訊28at.com

computed 計算屬性是基于它們的依賴進行緩存的，這意味著只有在它們的依賴發生變化時，才會重新計算。這使得它們更高效，因為它們只在需要時才會計算，而不是每次都調用。ELf28資訊網——每日最新資訊28at.com

下面是一個示例，展示了如何使用 computed 計算屬性:ELf28資訊網——每日最新資訊28at.com

<template>  <div>    <p>Full name: {{ fullName }}</p>    <input v-model="firstName">    <input v-model="lastName">  </div></template><script>export default {  data() {    return {      firstName: 'John',      lastName: 'Doe'    }  },  computed: {    fullName() {      return this.firstName + ' ' + this.lastName    }  }}</script>

在這個例子中，當 firstName 或 lastName 發生變化時，fullName 會自動重新計算。ELf28資訊網——每日最新資訊28at.com

computed 和 method 事件的區別

與 computed 計算屬性不同的是，methods 方法是每次都會調用的，不能進行緩存。如果你需要在每次渲染時都計算一個值，那么使用 methods 方法會更好。ELf28資訊網——每日最新資訊28at.com

下面是一個使用 methods 方法的示例：ELf28資訊網——每日最新資訊28at.com

<template>  <div>    <p>Full name: {{ getFullName() }}</p>    <input v-model="firstName">    <input v-model="lastName">  </div></template><script>export default {  data() {    return {      firstName: 'John',      lastName: 'Doe'    }},  methods: {    getFullName() {      return this.firstName + ' ' + this.lastName    }  }}</script>

在這個例子中，每次渲染時都會調用 getFullName 方法，而不是緩存其結果。ELf28資訊網——每日最新資訊28at.com

總結一下

適用 computed 計算屬性的場景是:ELf28資訊網——每日最新資訊28at.com

• 適合一些簡單的操作，比如數組排序或篩選
• 計算屬性可以直接在HTML中使用，像 Data 中的屬性一樣使用。
• 當你需要基于其它屬性計算一個新的值。
• 當你需要緩存計算結果,因為這樣能提高應用的性能。

適用 methods 方法的場景是:ELf28資訊網——每日最新資訊28at.com

• 當你需要在每次渲染時都計算一個值。
• 當你需要執行一些復雜的邏輯或者需要調用外部函數。
• 方法通常作為事件監聽或公共業務邏輯
• 方法可以當做普通 JS 函數使用

另外，計算屬性是可以被觀察的，可以被用在指令和計算屬性依賴中。而 method 方法不能被觀察到,不能用在指令和計算屬性依賴中。ELf28資訊網——每日最新資訊28at.com

再舉一個例子：

<template>  <div>    <p>Price: {{ price }}</p>    <p>Discount: {{ discount }}%</p>    <p>Discounted price: {{ discountedPrice }}</p>  </div></template><script>export default {  data() {    return {      price: 100,      discount: 10    }  },  computed: {    discountedPrice() {      return this.price * (1 - this.discount / 100)    }  }}</script>

在這個例子中，discountedPrice 是基于 price 和 discount 計算得出的，并且當 price 或 discount 發生變化時，discountedPrice 會自動重新計算。 而如果用 method 實現的話，每次都會計算一遍，而不是只在需要時計算。ELf28資訊網——每日最新資訊28at.com

總之，computed 計算屬性是一種高效的方式，能夠基于其它屬性進行計算并緩存結果，而 methods 方法則是每次都會調用并進行計算。ELf28資訊網——每日最新資訊28at.com

結束

今天的內容就介紹到這里，內容比較簡單，希望對你有所幫助。ELf28資訊網——每日最新資訊28at.com

本文鏈接：http://www.tebozhan.com/showinfo-26-41700-0.htmlVue3 學習筆記，如何理解 Computed 計算屬性

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： Mongodb和Elasticsearch計算經緯度哪個性能更好

下一篇： Go 語言字符串使用方式與技巧