Vue 3 中如何定义数据

Question

Vue 2 中定义数据主要有两种方式：

1. 使用 data 函数定义数据

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

1. 直接在 Vue 实例中定义数据

export default {
  mounted() {
    this.count = 0
  }
}

那vue3呢？怎么定义一个数据的。说vue2是什么 option API。vue3变成啥了

Answer 1

===========第一个问题：Vue 2和Vue 3中定义数据的方式对比=====================
Vue 2和Vue 3中定义数据的方式略有不同。

在Vue 2中，我们可以通过定义data属性来在Vue实例中定义数据。在data属性中，我们可以通过定义key-value的形式来赋值给Vue实例中的数据属性，如：

new Vue({
  data: {
    message: 'Hello Vue.js!'
  }
})

在模板中可以通过使用{{ message }} 来访问该数据。

在Vue 3中，由于Vue 3推出了Composition API，提供了一个新的方式来定义数据。使用setup函数来定义组件内部的变量/数据，如：

import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      message: 'Hello Vue 3!'
    }); 
    return { state };
  }
}

在组件模板中可以通过使用{{ state.message }} 来访问该数据。

需要注意的是，在Vue 3中，我们使用了reactive函数，将state对象转换为响应式对象，当数据发生变化时会自动更新视图。

==========================分割线==================================
其实vue3也可以使用data()定义数据
在Vue 3中，我们可以使用 data() 方法来定义数据，就像在Vue 2中一样。但是，data() 方法与 setup() 函数之间存在一些关键的区别。

在Vue 2中，data() 方法必须返回一个对象，这个对象就是组件内部的数据。但在Vue 3中，data() 方法不是必须的，而是可选的。如果你在Vue 3中需要用到响应式数据，你可以使用 ref、reactive、computed 等 API 来创建和管理响应式数据。

在 setup() 函数中，我们可以将 data() 方法返回的对象视为一个响应式的对象，并可以像在Vue 2中一样通过 this 来访问它。然而，如果 data() 方法返回的对象中包含其他类型的数据（如方法、计算属性等），这些数据在组件实例中并不是响应式的。

下面是一个使用 data() 方法来定义数据的例子：

<template>
  <div>{{ name }}</div>
</template>

<script>
export default {
  data() {
    return {
      name: 'Lucy'
    }
  }
}
</script>

需要注意的是，如果你使用 Vue CLI 创建一个 Vue 3 项目，那么默认情况下就是使用 setup() 函数来定义组件。如果你想使用 data() 方法，你需要在组件选项中添加一个 compatConfig 对象并设置它的 MODE 属性为 '3'，例如：

<script>
export default {
  data() {
    return {
      name: 'Lucy'
    }
  },
  compatConfig: {
    MODE: '3'
  }
}
</script>

在这种情况下，Vue 3 会将 data() 方法中返回的对象转换为响应式的对象，并使用其作为组件的响应式数据。