大家好，本篇文章我們繼續(xù)學(xué)習(xí)和 Vue 相關(guān)的內(nèi)容，今天我們歸納總結(jié)下什么是 computed 計(jì)算屬性、如何使用和應(yīng)用場(chǎng)景，以及 computed 和 Method 事件的區(qū)別和應(yīng)用場(chǎng)景。

什么是 computed 計(jì)算屬性

Vue.js 中的 computed 計(jì)算屬性是一種特殊類型的屬性，它們的值不是簡(jiǎn)單地被設(shè)置，而是根據(jù)其它屬性的值計(jì)算得出。

computed 計(jì)算屬性是基于它們的依賴進(jìn)行緩存的，這意味著只有在它們的依賴發(fā)生變化時(shí)，才會(huì)重新計(jì)算。這使得它們更高效，因?yàn)樗鼈冎辉谛枰獣r(shí)才會(huì)計(jì)算，而不是每次都調(diào)用。

下面是一個(gè)示例，展示了如何使用 computed 計(jì)算屬性:

<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>

在這個(gè)例子中，當(dāng) firstName 或 lastName 發(fā)生變化時(shí)，fullName 會(huì)自動(dòng)重新計(jì)算。

computed 和 method 事件的區(qū)別

與 computed 計(jì)算屬性不同的是，methods 方法是每次都會(huì)調(diào)用的，不能進(jìn)行緩存。如果你需要在每次渲染時(shí)都計(jì)算一個(gè)值，那么使用 methods 方法會(huì)更好。

下面是一個(gè)使用 methods 方法的示例：

<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>

在這個(gè)例子中，每次渲染時(shí)都會(huì)調(diào)用 getFullName 方法，而不是緩存其結(jié)果。

總結(jié)一下

適用 computed 計(jì)算屬性的場(chǎng)景是:

• 適合一些簡(jiǎn)單的操作，比如數(shù)組排序或篩選
• 計(jì)算屬性可以直接在HTML中使用，像 Data 中的屬性一樣使用。
• 當(dāng)你需要基于其它屬性計(jì)算一個(gè)新的值。
• 當(dāng)你需要緩存計(jì)算結(jié)果,因?yàn)檫@樣能提高應(yīng)用的性能。

適用 methods 方法的場(chǎng)景是:

• 當(dāng)你需要在每次渲染時(shí)都計(jì)算一個(gè)值。
• 當(dāng)你需要執(zhí)行一些復(fù)雜的邏輯或者需要調(diào)用外部函數(shù)。
• 方法通常作為事件監(jiān)聽(tīng)或公共業(yè)務(wù)邏輯
• 方法可以當(dāng)做普通 JS 函數(shù)使用

另外，計(jì)算屬性是可以被觀察的，可以被用在指令和計(jì)算屬性依賴中。而 method 方法不能被觀察到,不能用在指令和計(jì)算屬性依賴中。

再舉一個(gè)例子：

<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>

在這個(gè)例子中，discountedPrice 是基于 price 和 discount 計(jì)算得出的，并且當(dāng) price 或 discount 發(fā)生變化時(shí)，discountedPrice 會(huì)自動(dòng)重新計(jì)算。 而如果用 method 實(shí)現(xiàn)的話，每次都會(huì)計(jì)算一遍，而不是只在需要時(shí)計(jì)算。

總之，computed 計(jì)算屬性是一種高效的方式，能夠基于其它屬性進(jìn)行計(jì)算并緩存結(jié)果，而 methods 方法則是每次都會(huì)調(diào)用并進(jìn)行計(jì)算。

結(jié)束

今天的內(nèi)容就介紹到這里，內(nèi)容比較簡(jiǎn)單，希望對(duì)你有所幫助。