建网站软件手机网站关键

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)