1. 使用 data 函数
在 Vue 3.0 中，data 选项应该是一个函数，而不再是一个对象。这个函数返回一个包含组件数据的对象。这样做的目的是确保每个组件实例都拥有独立的数据副本，防止数据共享导致的不良副作用。
<script>
export default {
data() {
return {
message: 'Hello, Vue 3.0!',
count: 0,
};
},
};
</script>
2. 使用 ref 和 reactive
在 Composition API 中，你还可以使用 ref 和 reactive 函数创建响应式数据。
使用 ref
<script>
import { ref } from 'vue';
export default {
setup() {
const message = ref('Hello, Vue 3.0!');
const count = ref(0);
return {
message,
count,
};
},
};
</script>
使用 reactive
<script>
import { reactive } from 'vue';
export default {
setup() {
const data = reactive({
message: 'Hello, Vue 3.0!',
count: 0,
});
return data;
},
};
</script>
3. setup 函数
在 Vue 3.0 中，setup 函数用于设置组件的初始状态，并且是 Composition API 的入口。你可以在 setup 函数中调用 data 函数、创建响应式数据等。
<script>
import { ref } from 'vue';
export default {
setup() {
const message = ref('Hello, Vue 3.0!');
const count = ref(0);
// 在模板中访问 message 和 count
return { message, count };
},
};
</script>
总的来说，在 Vue 3.0 中，data 选项通过使用函数形式或 Composition API 的 ref 和 reactive 函数，提供了更灵活、清晰和强大的响应式数据管理方式。这有助于更好地组织和重用组件逻辑。
转载请注明出处：http://www.zyzy.cn/article/detail/567/Vue 3.0