详解Vue3中和Vue2中的computed的异同前言在这篇博客中，我们将比较Vue3中和Vue2中的computed

前言

在这篇博客中，我们将比较Vue3中和Vue2中的computed的相同点和不同点。 Computed是Vue.js中的一个核心功能，它可以动态地计算出基于响应式数据的值，并且在数据发生变化时自动更新。

在Vue2中，computed可以通过getters来定义计算属性，而在Vue3中，computed被重命名为计算逻辑，并且可以在setup函数中进行定义。

相同点：

在Vue2和Vue3中，computed都可以基于响应式数据进行计算，当响应式数据发生变化时，计算结果也会自动更新。
在Vue2和Vue3中，computed都会缓存计算结果。如果计算属性所依赖的响应式数据没有发生改变，那么下一次计算属性被访问时，它会立即返回缓存的值，而不是重新计算。
可以设置计算属性的setter 在Vue2和Vue3中，computed都可以拥有setter，用于监测计算属性的变化，并在计算属性被设置时做出响应。

不同点：

计算属性的定义方式在Vue2中，我们可以使用getters来定义计算属性，如下所示：

// Vue2中定义计算属性的示例
computed: {
  fullName: function () {
    return this.firstName + ' ' + this.lastName
  }
}

而在Vue3中，计算属性被重命名为计算逻辑，可以在setup函数中进行定义，如下所示：

// Vue3中定义计算逻辑的示例
import { computed } from 'vue'

setup() {
  const fullName = computed(() => {
    return this.firstName + ' ' + this.lastName
  })
}

计算逻辑可以直接访问props和data 在Vue2中，getters可以访问props和data，但是需要使用函数参数传入：

// Vue2中带参数的计算属性示例
computed: {
  fullName: function () {
    return function () {
      return this.firstName + ' ' + this.lastName
    }
  }
}

而在Vue3中，计算逻辑可以直接访问props和data，不需要使用函数参数：

// Vue3中直接访问props和data的计算逻辑示例
import { computed } from 'vue'

setup(props) {
  const fullName = computed(() => {
    return props.firstName + ' ' + props.lastName
  })
}

计算逻辑不支持watch，但是可以使用watchEffect 在Vue2中，我们可以使用watch来监测计算属性的变化：

// Vue2中使用watch监测计算属性的变化的示例
computed: {
  fullName: function () {
    return this.firstName + ' ' + this.lastName
  }
},

watch: {
  fullName: function (newVal, oldVal) {
    // 处理fullName的变化
  }
}

而在Vue3中，计算逻辑不再支持watch，但是可以使用watchEffect来监测变化：

// Vue3中使用watchEffect监测计算逻辑的变化的示例
import { computed, watchEffect } from 'vue'

setup() {
  const fullName = computed(() => {
    return props.firstName + ' ' + props.lastName
  })

  watchEffect(() => {
    // 处理fullName的变化
  })
}

计算逻辑可以定义为响应式的数据在Vue3中，我们可以将计算逻辑声明为响应式的数据，这样可以在setup函数中对其进行访问和更改：

// Vue3中定义响应式的计算逻辑的示例
import { computed, ref } from 'vue'

setup() {
  const firstName = ref('John')
  const lastName = ref('Doe')

  const fullName = computed(() => {
    return firstName.value + ' ' + lastName.value
  })

  fullName.value = 'Jane Doe'
}

总结

虽然Vue3中的计算逻辑与Vue2中的computed有一些区别，但是它们的基本功能和使用方法是相同的。

如果您已经熟悉Vue2中的computed，那么很容易就可以用Vue3中的计算逻辑取代computed。

在使用Vue3时，您可以根据自己的喜好和情况选择使用哪种方式来定义计算属性