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>

二、响应式原理深度解析

Vue 2 实现 (Object.defineProperty)