Vue.js: 计算属性 computed

// ❌ 翻车版：用 methods
function cartTotal(items) {
  console.log('Calculating...')  // 每次调用都打印
  return items.reduce((sum, item) => sum + item.price * item.quantity, 0)
}

<template>
  <div>
    <p>Total: ${{ cartTotal(items) }}</p>
    <p>Tax: ${{ cartTotal(items) * 0.08 }}</p>
    <p>Grand Total: ${{ cartTotal(items) * 1.08 }}</p>
    <button @click="showDate = new Date()">Update Time</button>
  </div>
</template>

import { ref, computed } from 'vue'

const items = ref([
  { price: 100, quantity: 2 },
  { price: 50, quantity: 1 }
])

// ✅ computed：只依赖 items，items 不变就不重算
const cartTotal = computed(() => {
  console.log('Calculating...')  // 只在 items 变化时打印
  return items.value.reduce((sum, item) => sum + item.price * item.quantity, 0)
})

// computed 自动处理 3 处使用：只算 1 次
const tax = computed(() => cartTotal.value * 0.08)
const grandTotal = computed(() => cartTotal.value * 1.08)

import { ref, computed } from 'vue'

const count = ref(0)

// 基础计算属性
const doubleCount = computed(() => {
  return count.value * 2
})

// 简写
const doubleCount = computed(() => count.value * 2)

// 使用
console.log(doubleCount.value)  // 0
count.value = 5
console.log(doubleCount.value)  // 10

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double: {{ doubleCount }}</p>
    <button @click="count++">+1</button>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const count = ref(0)
const doubleCount = computed(() => count.value * 2)
</script>

const firstName = ref('Alice')
const lastName = ref('Smith')

// 只有一个 getter
const fullName = computed(() => `${firstName.value} ${lastName.value}`)

console.log(fullName.value)  // Alice Smith
// fullName.value = 'Bob Lee'  // ❌ 警告：计算属性是只读的

const firstName = ref('Alice')
const lastName = ref('Smith')

const fullName = computed({
  // 读取：拼起来
  get() {
    return `${firstName.value} ${lastName.value}`
  },
  // 写入：拆开
  set(newValue) {
    const parts = newValue.split(' ')
    firstName.value = parts[0]
    lastName.value = parts[1] || ''
  }
})

// ✅ 现在可读可写
fullName.value = 'Bob Lee'
console.log(firstName.value)  // Bob
console.log(lastName.value)   // Lee

<template>
  <div>
    <input v-model="fullName">
    <p>First: {{ firstName }}</p>
    <p>Last: {{ lastName }}</p>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const firstName = ref('Alice')
const lastName = ref('Smith')

const fullName = computed({
  get: () => `${firstName.value} ${lastName.value}`,
  set: (val) => {
    const parts = val.split(' ')
    firstName.value = parts[0]
    lastName.value = parts[1] || ''
  }
})

const items = ref([
  { price: 100, quantity: 2 },
  { price: 50, quantity: 3 }
])

// 第一层：原价合计
const subtotal = computed(() =>
  items.value.reduce((sum, item) => sum + item.price * item.quantity, 0)
)

// 第二层：税（基于 subtotal）
const tax = computed(() => subtotal.value * 0.08)

// 第三层：折扣（基于 subtotal）
const discount = computed(() => subtotal.value > 200 ? 20 : 0)

// 第四层：最终总价
const total = computed(() => subtotal.value + tax.value - discount.value)

console.log(total.value)  // 350 * 1.08 - 20 = 358

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<div id="app">
  <p>Subtotal: ${{ subtotal }}</p>
  <p>Tax (8%): ${{ tax }}</p>
  <p>Discount: -${{ discount }}</p>
  <p><strong>Total: ${{ total }}</strong></p>
  <button @click="addItem">+ 加 1 件 Case</button>
</div>

<script>
const { createApp, ref, computed } = Vue
createApp({
  setup() {
    const items = ref([
      { name: 'iPhone', price: 999, quantity: 1 },
      { name: 'Case', price: 50, quantity: 2 }
    ])

    const subtotal = computed(() =>
      items.value.reduce((sum, item) => sum + item.price * item.quantity, 0)
    )
    const tax = computed(() => subtotal.value * 0.08)
    const discount = computed(() => subtotal.value > 1000 ? 50 : 0)
    const total = computed(() => subtotal.value + tax.value - discount.value)

    function addItem() {
      items.value.push({ name: 'Case', price: 50, quantity: 1 })
    }

    return { subtotal, tax, discount, total, addItem }
  }
}).mount('#app')
</script>

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<div id="app">
  <input v-model="fullName" placeholder="First Last">
  <p>First: {{ firstName }}</p>
  <p>Last: {{ lastName }}</p>
</div>

<script>
const { createApp, ref, computed } = Vue
createApp({
  setup() {
    const firstName = ref('Alice')
    const lastName = ref('Smith')

    const fullName = computed({
      get: () => `${firstName.value} ${lastName.value}`,
      set: (val) => {
        const parts = val.split(' ')
        firstName.value = parts[0] || ''
        lastName.value = parts[1] || ''
      }
    })
    return { firstName, lastName, fullName }
  }
}).mount('#app')
</script>

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<div id="app">
  <p>基础分: {{ baseScore }}</p>
  <p>附加分: {{ difficultyBonus }}</p>
  <p>总分: {{ baseScore + difficultyBonus }}</p>
  <p>等级: {{ grade }}</p>
  <button @click="score += 5">+5 分</button>
</div>

<script>
const { createApp, ref, computed } = Vue
createApp({
  setup() {
    const score = ref(85)

    // 第一层：基础分
    const baseScore = computed(() => score.value)

    // 第二层：附加分
    const difficultyBonus = computed(() => {
      if (baseScore.value >= 90) return 10
      if (baseScore.value >= 80) return 5
      return 0
    })

    // 第三层：等级
    const grade = computed(() => {
      const total = baseScore.value + difficultyBonus.value
      if (total >= 95) return 'A+'
      if (total >= 90) return 'A'
      if (total >= 80) return 'B'
      return 'C'
    })

    return { score, baseScore, difficultyBonus, grade }
  }
}).mount('#app')
</script>

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<div id="app">
  <p>Computed (1 次): {{ totalComputed }} | {{ totalComputed }} | {{ totalComputed }}</p>
  <p>Methods (3 次): {{ getTotal() }} | {{ getTotal() }} | {{ getTotal() }}</p>
</div>

<script>
const { createApp, ref, computed } = Vue
createApp({
  setup() {
    const items = ref([
      { name: 'A', price: 100, quantity: 1 },
      { name: 'B', price: 50, quantity: 2 }
    ])

    // ❌ methods：每次调用都重算
    function getTotal() {
      console.log('methods called')   // 模板中多次使用会打印多次
      return items.value.reduce((sum, i) => sum + i.price * i.quantity, 0)
    }

    // ✅ computed：只算 1 次
    const totalComputed = computed(() => {
      console.log('computed called')  // 只打印 1 次
      return items.value.reduce((sum, i) => sum + i.price * i.quantity, 0)
    })

    return { items, getTotal, totalComputed }
  }
}).mount('#app')
</script>