vue2与vue3中的computed

以下两种代码一样

 for(let i=0;i<allData.value.length;i++){

                sampleNoArr.value.push(allData.value[i].bakingBatch)

 }

  // computed 返回的是一个响应式的 ref 对象

sampleNoArr = computed(() => allData.value.map(item => item.bakingBatch))

Vue 2 中的 computed:

1. 返回的是一个响应式的值，而不是响应式对象。

• 可以直接在模板中使用，无需 .value。

• 在 JavaScript 中使用时也无需 .value。

// Vue 2
export default {
  data() {
    return {
      count: 0
    }
  },
  computed: {
    doubleCount() {
      return this.count * 2
    }
  },
  methods: {
    logDouble() {
      console.log(this.doubleCount) // 直接使用，无需 .value
    }
  }
}

Vue 3 中的 computed:

• 在组合式 API 中，computed 返回的是一个响应式的 ref 对象。

• 在模板中使用时，Vue 会自动解包 ref，所以不需要 .value。

• 在 JavaScript 中使用时需要通过 .value 访问其值。

// Vue 3 组合式 API
import { ref, computed } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const doubleCount = computed(() => count.value * 2)

    function logDouble() {
      console.log(doubleCount.value) // 需要使用 .value
    }

    return {
      count,
      doubleCount,
      logDouble
    }
  }
}