详解Vue3的组合式API中如何使用computed属性

<template>  
  <div>  
    <p>计数：{{ count }}</p>  
    <p>两倍计数：{{ doubleCount }}</p>  
  </div>  
</template>  
<script>  
import { computed } from 'vue';  
export default {  
  data() {  
    return {  
      count: 0,  
    };  
  },  
  setup() {  
    const doubleCount = computed(() => this.count * 2);  
    return {  
      count,  
      doubleCount,  
    };  
  },  
};  
</script>

<template>  
  <div>  
    <ul>  
      <li v-for="item in items" :key="item.id">  
        {{ item.name }} - ￥{{ item.price }}  
      </li>  
    </ul>  
    <p>总价：￥{{ totalPrice }}</p>  
  </div>  
</template>  
<script>  
import { computed } from 'vue';  
export default {  
  data() {  
    return {  
      items: [  
        { id: 1, name: '商品1', price: 10, quantity: 2 },  
        { id: 2, name: '商品2', price: 20, quantity: 1 },  
        { id: 3, name: '商品3', price: 30, quantity: 3 },  
      ],  
    };  
  },  
  setup() {  
    const totalPrice = computed(() => {  
      let total = 0;  
      for (let i = 0; i < this.items.length; i++) {  
        const item = this.items[i];  
        total += item.price * item.quantity;  
      }  
      return total;  
    });  
    return {  
      items,  
      totalPrice,  
    };  
  },  
};  
</script>

<template>  
  <div>  
    <p>原始数据：{{ originalData }}</p>  
    <p>处理后的数据：{{ processedData }}</p>  
  </div>  
</template>  
<script>  
import { computed, watch } from 'vue';  
export default {  
  data() {  
    return {  
      originalData: '',  
    };  
  },  
  setup() {  
    const processedData = computed(() => {  
      return JSON.parse(this.originalData);  
    });  
    watch(processedData, (value) => {  
      console.log('processedData changed:', value);  
    });  
    return {  
      originalData: '',  
      processedData,  
    };  
  },  
};  
</script>