VUE3 data()函数详解

<script>
export default {
  // data 必须是一个函数，返回响应式数据对象
  data() {
    return {
      count: 0,          // 基本类型（响应式）
      user: { name: 'Alice' },  // 对象（深层响应式）
      list: [1, 2, 3]     // 数组（响应式）
    };
  }
};
</script>
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="count++">Increment</button>
  </div>
</template>

// 组件中
methods: {
  addProp() {
    this.newProp = 'Hello'; // 直接新增属性，自动响应式
  }
}

// ❌ 错误：箭头函数导致 this 指向错误
data: () => ({ count: 0 })
// ✅ 正确：普通函数，this 指向组件实例
data() { return { count: 0 } }

// ❌ 错误：复用外部对象，多实例共享同一数据
const sharedData = { count: 0 };
export default { data: () => sharedData };
// ✅ 正确：每次返回新对象
export default { data() { return { count: 0 }; } }

import { markRaw } from 'vue';
export default {
  data() {
    return {
      reactiveData: { a: 1 },
      rawData: markRaw({ b: 2 }) // 标记为非响应式
    };
  }
};

<script>
export default {
  data() {
    return { count: 0 };
  },
  computed: {
    doubleCount() {
      return this.count * 2; // 访问 data 中的 count
    }
  },
  methods: {
    increment() {
      this.count++; // 修改 data 中的 count（触发视图更新）
    }
  },
  watch: {
    count(newVal) {
      console.log('Count changed:', newVal); // 监听 count 变化
    }
  }
};
</script>

<script setup>
import { ref, computed } from 'vue';
const count = ref(0); // 基本类型响应式（ref）
const doubleCount = computed(() => count.value * 2); // 计算属性
function increment() {
  count.value++; // 修改需通过 .value（模板中自动解包）
}
</script>

import { defineComponent } from 'vue';
interface ComponentData {
  count: number;
  user: { name: string; age?: number };
}
export default defineComponent({
  data(): ComponentData { // 显式指定返回类型
    return {
      count: 0,
      user: { name: 'Alice' }
    };
  }
});