vue 3 中仍然保留了 data 选项，它是一个返回可被组件响应式访问的对象的函数。但它同时引入了 setup 函数，允许使用更简洁的语法定义组件状态和方法。setup 函数的差异在于：1. 它返回一个包含组件状态和方法的对象；2. 对象中状态属性使用 ref 值而不是 this 访问。

Vue 3 中的 data 选项

问题：Vue 3 中是否还有 data 选项？

回答：有

详细说明：

立即学习“前端免费学习笔记（深入）”；

Vue 3 中仍然保留了 data 选项。它仍然是一个函数，用于返回一个可被组件响应式地访问的对象。然而，Vue 3 引入了新的 setup 函数，它允许使用更简洁的语法来定义组件状态。

data 选项与 setup 函数的差异：

• data 选项：直接返回一个包含组件状态的对象。
• setup 函数：返回一个包含组件状态和方法的对象。setup 函数中的状态属性使用 ref 值而不是 this 访问。

一般来说，对于简单的组件，data 选项仍然是一个不错的选择。但是，对于更复杂的组件，setup 函数可以提供更清晰、更可维护的代码组织。

此外，Vue 3 中的 data 选项可以接受一个函数作为参数。此函数将在组件实例化时被调用，并允许异步获取数据。

示例：

使用 data 选项：

export default {
  data() {
    return {
      count: 0
    }
  }
}

使用 setup 函数：

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    return {
      count
    }
  }
}