Vue 实例的数据对象详解
Vue 实例的数据对象详解
在 Vue 中，数据对象是响应式系统的核心，也是组件状态的载体。理解数据对象的原理和使用方式是成为 Vue 专家的关键一步。我将从多个维度深入剖析 Vue 实例的数据对象。
一、数据对象的定义方式
1. Options API 中的定义
在 Options API 中，使用 data 选项定义数据对象：
export default {data() {// 必须返回一个对象return {message: 'Hello Vue!',counter: 0,user: {name: 'Alice',age: 30},items: ['apple', 'banana']}}
}
关键特性：
- 必须是函数：组件可能被复用，函数保证每个实例有独立的数据副本
- 返回普通对象：包含组件的初始状态
- 深层响应式：嵌套对象也会被转换为响应式
2. Composition API 中的定义
在 Composition API 中，使用 ref 和 reactive：
import { ref, reactive } from 'vue'export default {setup() {// 基本类型数据const message = ref('Hello Vue!')// 对象类型数据const user = reactive({name: 'Alice',age: 30})// 数组const items = ref(['apple', 'banana'])return {message,user,items}}
}
<!-- <script setup> 语法糖 -->
<script setup>
import { ref, reactive } from 'vue'const message = ref('Hello Vue!')
const user = reactive({ name: 'Alice', age: 30 })
const items = ref(['apple', 'banana'])
</script>