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

  }