vue2 computed用法

Vue2中的computed是一种计算属性，它可以根据依赖的数据动态计算出一个新的值，并且具有缓存性，只有当依赖的数据发生改变时才会重新计算。computed的使用方法是在Vue实例中定义一个computed对象，对象中的每个属性都是一个计算属性，属性名是计算属性的名称，属性值是一个函数，函数返回计算属性的值。在模板中可以直接使用计算属性的名称来获取计算属性的值，而不需要在模板中写复杂的逻辑代码。同时，computed也可以依赖其他的计算属性，这样就可以实现多个计算属性之间的复杂计算。

例如，上面提供的代码中，computed对象中定义了一个color计算属性，它依赖于foo和foo1两个data属性，当foo或foo1发生改变时，color会重新计算。在模板中，我们可以直接使用{{color}}来获取color计算属性的值，而不需要在模板中写复杂的逻辑代码。

相关问题

vue2 computed 使用方法

Vue2中的computed属性可以根据其他属性的值计算出一个新的属性值，并且在依赖的属性值发生变化时自动更新。使用computed属性可以避免在模板中写过多的逻辑代码，使得代码更加简洁易懂。

computed属性的使用方法如下：
1. 在Vue实例中定义computed属性，属性值为一个函数，函数返回计算后的值。
2. 在模板中使用computed属性，直接使用属性名即可。

下面是一个使用computed属性的例子：

<template>
  <div>
    <p>商品价格：{{ price }}</p>
    <p>商品折扣：{{ discount }}</p>
    <p>商品实际价格：{{ realPrice }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 100,
      discountRate: 0.8
    }
  },
  computed: {
    discount() {
      return this.price * (1 - this.discountRate)
    },
    realPrice() {
      return this.price - this.discount
    }
  }
}
</script>

在上面的例子中，我们定义了一个computed属性discount和realPrice，分别计算商品的折扣和实际价格。在模板中直接使用这两个属性即可。

vue3 computed用法

computed属性是Vue.js的一个特性，也被称作计算属性。它允许你根据其他数据的变化来动态计算出一个新的值。computed属性具有缓存性，当依赖的值变化时，computed属性会重新计算，但是当无关值变化时，computed属性的值不会变化。

在Vue.js 3中，使用computed属性有两种形式：简写形式和完整形式。

简写形式的computed属性只能用于读取值，不能用于更新值。你可以在setup函数中使用reactive函数创建一个响应式的对象，并在computed函数中定义computed属性。以下是一个使用computed属性的简写形式的代码示例：

import { computed, reactive } from 'vue'

export default {
  setup() {
    let per = reactive({
      surname: '勇敢',
      name: '小陈'
    })

    const fullName = computed(() => {
      return per.surname + ' ' + per.name
    })

    return {
      per,
      fullName
    }
  }
}

完整形式的computed属性可以同时用于读取和更新值。你可以在computed函数中使用get和set方法分别定义computed属性的读取和更新逻辑。以下是一个使用computed属性的完整形式的代码示例：

import { computed, reactive } from 'vue'

export default {
  setup() {
    let per = reactive({
      surname: '勇敢',
      name: '小陈'
    })

    const fullName = computed({
      get() {
        return per.surname + ' ' + per.name
      },
      set(value) {
        var arr = value.split(' ')
        per.surname = arr[0]
        per.name = arr[1]
      }
    })

    return {
      per,
      fullName
    }
  }
}

以上示例中，我们分别定义了一个名为fullName的computed属性，它的值是根据per对象中的surname和name属性计算而来的。在简写形式中，只能读取fullName的值，而在完整形式中，我们可以通过set方法更新fullName的值。