以下是在 Vue 3.0 中使用 data 选项的示例：
<template>
<div>
<p>{{ message }}</p>
<button @click="changeMessage">Change Message</button>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello from Vue 3.0'
};
},
methods: {
changeMessage() {
this.message = 'Message changed!';
}
}
};
</script>
在上述示例中，data 不再是一个普通的对象，而是一个返回对象的函数。这确保每个组件实例都有自己的数据副本，防止在组件之间共享数据时产生的问题。这个函数返回的对象中的属性就是组件的数据。
注意，在 Vue 3.0 中，不再支持直接在 data 中定义非响应式的普通对象，因为 Vue 3.0 引入了更严格的响应式系统。如果需要定义非响应式的属性，可以将其定义在 setup 函数中，或者使用 ref 或 reactive 进行处理。
<script>
import { ref } from 'vue';
export default {
setup() {
const nonReactiveData = ref('Non-reactive Data');
// ...
return {
nonReactiveData
};
}
};
</script>
在 setup 函数中，你可以使用 ref 创建一个非响应式的数据，这样就不会受到 Vue 3.0 响应式系统的影响。需要注意的是，setup 函数是 Vue 3.0 中的 Composition API 的一部分，用于替代 Vue 2.x 中的选项 API。
转载请注明出处：http://www.zyzy.cn/article/detail/543/Vue 3.0